npm - @nanoporetech-digital/components - Versions diffs - 7.6.0 → 7.8.0 - Mend

@nanoporetech-digital/components 7.6.0 → 7.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 (680) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\n\n/*\n A lightweight, context-aware CSS grid implementation.\n \n - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items\|content` / `align-items\|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n \n @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number \| string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /* the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) sSize: number \| string = 300;\n\n /* the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) mSize: number \| string = 550;\n\n /* the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) lSize: number \| string = 800;\n\n /* the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) xlSize: number \| string = 1000;\n\n /* the number of columns the grid has at the small breakpoint. /\n @Prop({ reflect: true }) sCols: number;\n\n /* the number of columns the grid has at the medium breakpoint. /\n @Prop({ reflect: true }) mCols: number;\n\n /* the number of columns the grid has at the large breakpoint. /\n @Prop({ reflect: true }) lCols: number;\n\n /* the number of columns the grid has at the xl breakpoint. /\n @Prop({ reflect: true }) xlCols: number;\n\n /* the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) /\n @Prop({ reflect: true }) xxlCols: number;\n\n /* Optional small `grid-template`. Note - you must set `sCols` for this to take affect /\n @Prop() sTpl?: string;\n\n /* Optional medium `grid-template`. Note - you must set `mCols` for this to take affect /\n @Prop() mTpl?: string;\n\n /* Optional large `grid-template`. Note - you must set `lCols` for this to take affect /\n @Prop() lTpl?: string;\n\n /* Optional xl `grid-template`. Note - you must set `xlCols` for this to take affect /\n @Prop() xlTpl?: string;\n\n /* Optional xxl `grid-template`. Note - you must set `xxlCols` for this to take affect /\n @Prop() xxlTpl?: string;\n\n /* shows a grid helper to visualise where columns are /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template \|\| ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = / css / `\n ${this.grids\n .map(\n (bp) => / css / `\n @container (min-width: ${\n Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper\n ? / css / `\n [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n : ''\n }\n }\n `\n )\n .join('')}\n `;\n return css\n .replace(/\\/\\[\\s\\S]?\\\\//g, '') // Remove comments\n .replace(/\\s{2,}/g, ' ') // Replace multiple spaces with a single space\n .replace(/\\s([{}:;,])\\s/g, '$1') // Remove spaces around CSS symbols\n .replace(/\\n/g, ''); // Remove newlines;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host>\n <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/components/grid/grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Host, State, Watch } from '@stencil/core';\nimport { ConstructibleStyle } from '../../utils/constructible-style';\nimport { h } from '../../utils/renderer';\n\n/*\n A lightweight, context-aware CSS grid implementation.\n \n - Define multiple grids templates at different breakpoints\n * - Uses `@container` queries to select the correct grid depending on the current dimensions\n * - Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n * - SSR optimised\n\n * @part grid - the main grid element.\n * Use this to set css such as `justify-items\|content` / `align-items\|content` / `place-content`\n * @part helper - a replica grid showed when `show-helper` is true\n \n @slot - default slot. Use this to place grid items. Use `grid-states=\"...\"` attribute to opt-out of auto / sequential placement.\n /\n@Component({\n tag: 'nano-grid',\n styleUrl: 'grid.scss',\n shadow: true,\n})\nexport class Grid {\n private grids: {\n cols: number;\n breakpoint: number \| string;\n name: string;\n template?: string;\n }[] = [];\n @State() cacheKey: string;\n\n /* the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) sSize: number \| string = 300;\n\n /* the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) mSize: number \| string = 550;\n\n /* the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) lSize: number \| string = 800;\n\n /* the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n * Will default to `px` if no unit supplied e.g. `20rem` /\n @Prop({ reflect: true }) xlSize: number \| string = 1000;\n\n /* the number of columns the grid has at the small breakpoint. /\n @Prop({ reflect: true }) sCols: number;\n\n /* the number of columns the grid has at the medium breakpoint. /\n @Prop({ reflect: true }) mCols: number;\n\n /* the number of columns the grid has at the large breakpoint. /\n @Prop({ reflect: true }) lCols: number;\n\n /* the number of columns the grid has at the xl breakpoint. /\n @Prop({ reflect: true }) xlCols: number;\n\n /* the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) /\n @Prop({ reflect: true }) xxlCols: number;\n\n /* Optional small `grid-template`. Note - you must set `sCols` for this to take affect /\n @Prop() sTpl?: string;\n\n /* Optional medium `grid-template`. Note - you must set `mCols` for this to take affect /\n @Prop() mTpl?: string;\n\n /* Optional large `grid-template`. Note - you must set `lCols` for this to take affect /\n @Prop() lTpl?: string;\n\n /* Optional xl `grid-template`. Note - you must set `xlCols` for this to take affect /\n @Prop() xlTpl?: string;\n\n /* Optional xxl `grid-template`. Note - you must set `xxlCols` for this to take affect /\n @Prop() xxlTpl?: string;\n\n /* shows a grid helper to visualise where columns are /\n @Prop({ reflect: true }) showHelper: boolean = false;\n\n @Watch('sTpl')\n @Watch('mTpl')\n @Watch('lTpl')\n @Watch('xlTpl')\n @Watch('xxlTpl')\n @Watch('sSize')\n @Watch('mSize')\n @Watch('lSize')\n @Watch('xlSize')\n @Watch('sCols')\n @Watch('mCols')\n @Watch('lCols')\n @Watch('xlCols')\n @Watch('xxlCols')\n @Watch('showHelper')\n constructSizeArray() {\n this.grids = [];\n\n if (this.sCols)\n this.grids.push({\n cols: this.sCols,\n breakpoint: 0,\n name: 's',\n template: this.sTpl,\n });\n if (this.mCols)\n this.grids.push({\n cols: this.mCols,\n breakpoint: this.sSize,\n name: 'm',\n template: this.mTpl,\n });\n if (this.lCols)\n this.grids.push({\n cols: this.lCols,\n breakpoint: this.mSize,\n name: 'l',\n template: this.lTpl,\n });\n if (this.xlCols)\n this.grids.push({\n cols: this.xlCols,\n breakpoint: this.lSize,\n name: 'xl',\n template: this.xlTpl,\n });\n if (this.xxlCols)\n this.grids.push({\n cols: this.xxlCols,\n breakpoint: this.xlSize,\n name: 'xxl',\n template: this.xxlTpl,\n });\n\n this.cacheKey =\n this.grids\n .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template \|\| ''}`)\n .join('') +\n '-helper-' +\n this.showHelper;\n }\n\n @ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }) protected styles =\n () => {\n const css = / css / `\n ${this.grids\n .map(\n (bp) => / css / `\n @container (min-width: ${\n Number((bp.breakpoint as number) + 1)\n ? Number(bp.breakpoint) + 1 + 'px'\n : bp.breakpoint\n }) {\n [cache-key=\"${this.cacheKey}\"].grid {\n --current-grid-size: \"grid size: ${bp.name}\";\n ${\n bp.template\n ? `grid-template: ${bp.template};`\n : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`\n }\n }\n ${[...Array(bp.cols)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-start-${gItm}\"]) {\n grid-column-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-col-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-col-span-${gItm}\"]) {\n grid-column-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${[...Array(24)]\n .map((_, i) => {\n const gItm = i + 1;\n return / css / `\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-start-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-start-${gItm}\"]) {\n grid-row-start: ${gItm} !important;\n }\n [cache-key=\"${this.cacheKey}\"].grid > [grid-states~=\"${bp.name}-row-span-${gItm}\"],\n ::slotted([grid-states~=\"${bp.name}-row-span-${gItm}\"]) {\n grid-row-end: span ${gItm} !important;\n }\n `;\n })\n .join('')}\n ${\n this.showHelper\n ? / css / `\n [cache-key=\"${this.cacheKey}\"].grid--helper :nth-child(-n+${bp.cols}) {\n display: block !important;\n }\n `\n : ''\n }\n }\n `\n )\n .join('')}\n `;\n return css\n .replace(/\\/\\[\\s\\S]?\\\\//g, '') // Remove comments\n .replace(/\\s{2,}/g, ' ') // Replace multiple spaces with a single space\n .replace(/\\s([{}:;,])\\s/g, '$1') // Remove spaces around CSS symbols\n .replace(/\\n/g, ''); // Remove newlines;\n };\n\n componentWillLoad() {\n this.constructSizeArray();\n }\n\n render() {\n return (\n <Host clas=\"nano-grid\">\n <div part=\"grid\" class=\"grid\" cache-key={this.cacheKey}>\n <slot />\n </div>\n {this.showHelper && (\n <div\n class=\"grid grid--helper\"\n part=\"helper\"\n cache-key={this.cacheKey}\n >\n {[...Array(24)].map(() => (\n <div class=\"grid__helper-item\" />\n ))}\n </div>\n )}\n </Host>\n );\n }\n}\n"]}

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

@@ -199,7 +199,7 @@
 .hero--backbtn .hero__primary {
   margin-inline-start: 0;
 }
-.hero__primary ::slotted(nano-icon-button[slot=back-btn]) {
+.hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {
   font-size: 2rem;
 }
 @container (min-width: 800px) {
@@ -207,7 +207,7 @@
     margin-block: 0 50px !important;
     margin-inline: 50px 0 !important;
   }
-  .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {
+  .hero__primary ::slotted(.nano-icon-button[slot=back-btn]) {
     margin-block: 0 !important;
     margin-inline: -3rem 0 !important;
   }

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

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, } from "@stencil/core";
+import { Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 /**
  * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.
  * @slot primary-content - title, leading paragraph and CTA
@@ -103,7 +104,7 @@ export class Hero {
     };
     render() {
         const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
-        return (h(Host, { key: '50eee29214f21f5278267bcc742170347e7cf397' }, h("div", { key: '8a2ab272547fd2a3627c039e9666a24b6de223c9', class: {
+        return (h(Host, { key: '3ea826a0e3c29d25595e2ed95b36398980193ade', class: "nano-hero" }, h("div", { key: '09b08515b8bd244eef354df64e76814ec7fbda6d', class: {
                 hero: true,
                 'hero--light': this.theme === 'light',
                 'hero--secondary': this.hasSecondaryContent,
@@ -114,9 +115,9 @@ export class Hero {
                 'hero--hasbg': this.hasBg,
                 'hero--backbtn': this.hasBackBtn,
                 'hero--sub': this.level === 'sub',
-            } }, h("div", { key: '8c17aac8b8653355e4ce97fa119d86e0cce518ae', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '89df34f9d693a35df5f2092ef3232772caa860a1', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'dc4d9b0027cfc96f13ff7757e175da523b3eb100' }))), !this.imgSrc && [
-            h("div", { key: '1e760a079ebcaab5272a10fdb7b70aa3622ce0db', class: "hero__bg-slot" }, h("slot", { key: '3a73a260e528956adc797cdd39bb521c54db7b96', name: "background" })),
-            h(this.HeroContent, { key: 'dd458de1ca33a34131445390b95bf63bb27dfeba' }),
+            } }, h("div", { key: '46b5daff7c9c768c5354b54a1dd9f8ca8b9fc100', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '0bc5e85862297cbd10bb4953c545eaccfde46d34', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: '96a6199bb1c851b70cbc146b25d722f3c7c7cfbb' }))), !this.imgSrc && [
+            h("div", { key: 'b34f8983859f55762fddd7ebadd95b2db6d96f7a', class: "hero__bg-slot" }, h("slot", { key: 'df7263acd2610a142fe492555b77e6d24bd382a4', name: "background" })),
+            h(this.HeroContent, { key: 'c02cbdf49f60dc755c3103f84df6e1de82b3a7ce' }),
         ]))));
     }
     static get is() { return "nano-hero"; }

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() 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 background 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 // 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 class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <div grid-states=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </div>\n <div\n grid-states={\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 </div>\n {this.hasSecondaryContent && (\n <div grid-states=\"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 </div>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n return (\n <Host>\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 ComponentInterface,\n VNode,\n State,\n Element,\n Watch,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\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() 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 background 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 // 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 class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n <div grid-states=\"xl-col-span-2\">\n <div class=\"hero__breadcrumbs\">\n <slot name=\"breadcrumb\" />\n </div>\n </div>\n <div\n grid-states={\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 </div>\n {this.hasSecondaryContent && (\n <div grid-states=\"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 </div>\n )}\n </nano-grid>,\n ];\n };\n\n render() {\n const rtl =\n this.host.dir === 'rtl' \|\| this.host.ownerDocument.dir === 'rtl';\n\n return (\n <Host class=\"nano-hero\">\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.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Build, Host, h, } from "@stencil/core";
+import { Build, Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { createColorClasses } from "../../utils/theme";
 import { getSvgContent, iconContent } from "./request";
 import { getName, getUrl } from "./utils";
@@ -161,11 +162,12 @@ export class Icon {
                     this.name.indexOf('chevron') > -1) &&
                 this.isRtl() &&
                 this.flipRtl !== false);
-        return (h(Host, { key: '2f552d1b452a5c6a2b3aba09d5eba30e22ba756c', class: {
+        return (h(Host, { key: 'b63eb962d8abc727b57cbb63b665296a2801f4a0', class: {
                 ...createColorClasses(this.color),
                 loading: this.isLoading,
                 [`icon-${this.size}`]: !!this.size,
                 'flip-rtl': !!flipRtl,
+                'nano-icon': true,
             } }, Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
     }
     static get is() { return "nano-icon"; }

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":"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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 '../../types/shared';\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 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 role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n /\n @Prop({ mutable: true, reflect: true }) role: string;\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 @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role \|\| this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\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 } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\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.udpateRole();\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 // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\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 this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\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.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\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} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\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 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 role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n /\n @Prop({ mutable: true, reflect: true }) role: string;\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 @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role \|\| this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\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 } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\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.udpateRole();\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 // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\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 this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\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.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n 'nano-icon': true,\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.js CHANGED Viewed

@@ -97,9 +97,9 @@ export class IconButton {
     }
     render() {
         if (this.showTooltip) {
-            return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
+            return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
         }
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null }, this.content()));
+        return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
     }
     static get is() { return "nano-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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~~qBAAgB~~,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;~~gBAChD~~,oBAAc,OAAO,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,EAAE,CAAgB,CAC7D,CACR,CAAC;QACJ,CAAC;QACD,OAAO,CACL,EAAC,IAAI,~~qBAAgB~~,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,~~IAC/C~~,IAAI,CAAC,OAAO,EAAE,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n \n @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n /\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n @Element() host: HTMLNanoIconButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* display the label as a `<nano-tooltip />` /\n @Prop() showTooltip: boolean = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) /\n @Prop() rel: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* The HTML form element or form element id.\n * Used to submit a form when the button is not a child of the form. /\n @Prop() form: HTMLFormElement \| string;\n\n /* Sets focus on the internal button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /\n Finds the form element based on the provided `form` selector\n * or element reference provided.\n * @returns the found form element (if found)\n */\n private findForm(): HTMLFormElement \| null {\n const { form, host } = this;\n if (!form) return host.closest('form');\n\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n if (this.type === 'button') return;\n const formEl = this.findForm();\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n };\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType: 'a' \| 'button' = this.href === undefined ? 'button' : 'a';\n\n return (\n <TagType\n onClick={this.handleClick}\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n rel={this.rel \|\| undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <span class=\"icon-button__label\">{this.label}</span>\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n </Host>\n );\n }\n return (\n <Host aria-disabled={this.disabled ? 'true' : null}>\n {this.content()}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n ComponentInterface,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n \n @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n /\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n @Element() host: HTMLNanoIconButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* display the label as a `<nano-tooltip />` /\n @Prop() showTooltip: boolean = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) /\n @Prop() rel: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* The HTML form element or form element id.\n * Used to submit a form when the button is not a child of the form. /\n @Prop() form: HTMLFormElement \| string;\n\n /* Sets focus on the internal button /\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /\n Finds the form element based on the provided `form` selector\n * or element reference provided.\n * @returns the found form element (if found)\n */\n private findForm(): HTMLFormElement \| null {\n const { form, host } = this;\n if (!form) return host.closest('form');\n\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n if (this.type === 'button') return;\n const formEl = this.findForm();\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n };\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType: 'a' \| 'button' = this.href === undefined ? 'button' : 'a';\n\n return (\n <TagType\n onClick={this.handleClick}\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n rel={this.rel \|\| undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <span class=\"icon-button__label\">{this.label}</span>\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n </Host>\n );\n }\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.content()}\n </Host>\n );\n }\n}\n"]}

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

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Build, } from "@stencil/core";
+import { Build, Host, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 /**
  * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.
  * @slot - Main slot. Only relevant with `<nano-img background>`
@@ -133,16 +134,16 @@ export class Img {
         const bgStyle = this.loadSrc
             ? { 'background-image': `url(${this.loadSrc})` }
             : {};
-        return (h("div", { key: 'cbb3d0ef49c058dbf5767ca7b78c3559068c2446', class: "img" }, h("nano-skeleton", { key: 'f2e120c2563e4034795c3bab3151a90b2202487a', class: "img__loader" }), !!this.background && (h("div", { key: '3f5fd5a46bc7b92f47b03aa718a1dc10fa582e03', class: {
+        return (h(Host, { key: '5f56dcb4a2fe386f1bdd130f4ddf48e2f6859f67', class: "nano-img" }, h("div", { key: 'bf901f23c00d91e988c530b98ea3e72d55a06b25', class: "img" }, h("nano-skeleton", { key: '67b01b95235b44ac958f74b9162a1f10f81d5253', class: "img__loader" }), !!this.background && (h("div", { key: 'b5f786a707e70b78a183fcd15fb02d0ed1066d9c', class: {
                 loaded: this.hasLoaded,
                 img__bg: true,
                 'no-height': this.autoHeight === 'image',
-            }, style: bgStyle }, h("slot", { key: 'f98f9ac3cf5203cba787611159026da6a068a4b0' }))), h("img", { key: 'e8c77b33922845f24760a075110e81e7e55ab914', class: {
+            }, style: bgStyle }, h("slot", { key: 'a56ca90ca3a47eeefe1f54229c2d4cf056dab2fc' }))), h("img", { key: 'f15763c2522895d76416e38044cc26baff76f74a', class: {
                 img__image: true,
                 loaded: this.hasLoaded,
                 hide: this.background,
                 'no-height': this.autoHeight === 'content',
-            }, 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", { key: '5208f5833596d5ed04e5a4dd1f2e8418510ea144', 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", { key: '4db81fe9e3b7fb99773daa70efe9f89abb2ad362', 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 Build,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from '../resize-observe/resize-observe-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"]}
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,EAEL,KAAK,EACL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAGzC;;;GAGG;AAMH,MAAM,OAAO,GAAG;IACN,EAAE,CAAwB;IAC1B,OAAO,GAAwD,EAAE,CAAC;IAE/D,IAAI,CAAsB;IAE5B,OAAO,CAAU;IACjB,SAAS,CAAc;IACvB,SAAS,GAAY,KAAK,CAAC;IAC3B,SAAS,GAAW,IAAI,CAAC;IACzB,IAAI,CAAS;IAEtB,WAAW;QACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED;8GAC0G;IAClG,GAAG,CAAU;IAErB,0EAA0E;IAClE,GAAG,CAAU;IAErB,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;IACvB,CAAC;IAED;qGACiG;IACzF,MAAM,CAAU;IAExB,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,OAAO,IAAI,CAAC,OAAO,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAElB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM;aACzB,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACb,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;YAC7D,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;YAC/C,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,oEAAoE;IAC5D,IAAI,GAAY,IAAI,CAAC;IAE7B,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,8CAA8C;IACtC,UAAU,CAAW;IAE7B;8FAC0F;IAClF,UAAU,GAAwB,SAAS,CAAC;IAEpD,4CAA4C;IACnC,eAAe,CAAsB;IAE9C,kDAAkD;IACzC,cAAc,CAAsB;IAE7C,yCAAyC;IAChC,YAAY,CAAsB;IAEnC,KAAK;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QACzC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QACD,IACE,OAAQ,MAAc,KAAK,WAAW;YACtC,sBAAsB,IAAI,MAAM,EAChC,CAAC;YACD,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,EAAE,GAAG,IAAI,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE;gBAC1C,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;oBAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;oBACZ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;;YAAM,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,CAAC,CAAC;IAC5C,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC;IAEO,MAAM,GAAG,GAAG,EAAE;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;QAC3B,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,OAAO,GAAG,GAAG,EAAE;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,QAAQ,GAAG,CAAC,CAA2C,EAAE,EAAE;QACjE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE;YAChD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,kDAAkD;QAClD,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;aACtB,IAAI,EAAE;aACN,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YACd,IAAI,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,MAAM;gBAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEL,IAAI,OAAO,CAAC,MAAM;YAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,yCAAyC;;YACpC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;IAC5B,CAAC,CAAC;IAEM,QAAQ;QACd,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC;QACtB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;YAC1B,CAAC,CAAC,EAAE,kBAAkB,EAAE,OAAO,IAAI,CAAC,OAAO,GAAG,EAAE;YAChD,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,UAAU;YACpB,4DAAK,KAAK,EAAC,KAAK;gBACd,sEAAe,KAAK,EAAC,aAAa,GAAiB;gBAClD,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,CACpB,4DACE,KAAK,EAAE;wBACL,MAAM,EAAE,IAAI,CAAC,SAAS;wBACtB,OAAO,EAAE,IAAI;wBACb,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,OAAO;qBACzC,EACD,KAAK,EAAE,OAAO;oBAEd,8DAAQ,CACJ,CACP;gBACD,4DACE,KAAK,EAAE;wBACL,UAAU,EAAE,IAAI;wBAChB,MAAM,EAAE,IAAI,CAAC,SAAS;wBACtB,IAAI,EAAE,IAAI,CAAC,UAAU;wBACrB,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;qBAC3C,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;gBACF,4EACE,KAAK,EAAC,eAAe,EACrB,uBAAuB,EAAE,IAAI,CAAC,QAAQ,EACtC,MAAM,EAAE,IAAI,CAAC,SAAS,GACtB,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n State,\n Prop,\n Watch,\n ComponentInterface,\n Build,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from '../resize-observe/resize-observe-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 <Host class=\"nano-img\">\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 </Host>\n );\n }\n}\n"]}

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

@@ -1,11 +1,12 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { Build, Host, h, } from "@stencil/core";
+import { Build, Host, } from "@stencil/core";
 import { closestElement } from "../../utils/dom";
 import { createColorClasses } from "../../utils/theme";
 import { debounceEvent, debounce } from "../../utils/throttle";
 import { FormControl, FormControlWrap } from "../form-control/form-control";
+import { h, transformTag } from "../../utils/renderer";
 let inputIds = 0;
 /**
  * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
@@ -445,7 +446,7 @@ export class Input {
         this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]');
         this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
         this.hasHelperEndSlot = !!this.el.querySelector('[slot="helper-end"]');
-        this.datalist = this.el.querySelector('nano-datalist:not([slot])');
+        this.datalist = this.el.querySelector(`${transformTag('nano-datalist')}:not([slot])`);
         // breaking change introduced in v2. Rm in v3
         if (this.el.querySelector('[slot="inline-button"]')) {
             console.warn('The `inline-button` slot was renamed to `end` in v2 - please update your code', this.el);
@@ -514,15 +515,16 @@ export class Input {
             disabled,
             clearControl: this.clearInput,
         }))(this);
-        return (h(Host, { key: 'd3ba5aeef1a8b0dc6d8184a5baf858a80525c907', "aria-disabled": this.disabled ? 'true' : null, dir: this.rtl ? 'rtl' : null, class: {
+        return (h(Host, { key: 'dfed5ae52b51a714f2aa0218b9cee8081251a2c9', "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("div", { key: 'd8c8488f37aa9474f946d165aa2f91c55886f74f', style: { width: '100%' } }, h(FormControlWrap, { key: '50dc939d11a2704aacc6f967670e2945fd063b89', ...wrapOptions }, h(FormControl, { key: 'fbe48f48485af685c0787dcfdc67a198b9904bd2', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (h("input", { key: '9851de702e37a25a86ccf1935372ec0b3992e127', 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", { key: 'b0e639724c3458e45854b31dd17e26839737479d', rows: this.floatLabel ? 1 : this.rows, id: this.inputId, class: {
+                'nano-input': true,
+            } }, h("div", { key: '94d4634ca2fe48cce7f761fb4e6a3d640121baf9', style: { width: '100%' } }, h(FormControlWrap, { key: 'aa8bc2042e5f21fd351acabb4b515fba4cda0dba', ...wrapOptions }, h(FormControl, { key: 'ab008f2dd670122ed5998fdb9dcf004a14e5e274', ...controlOptions, onClearText: this.clearTextInput, control: this.el, ref: (el) => (this.nativeInputWrap = el) }, this.type !== 'textarea' && (h("input", { key: '2d23e3f0fe71c5d0b5cf56f849b0166dac2d6419', 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", { key: '09639dab83617d2153981e04fe61088294b336cc', 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", { key: '3d2663183a74f118a092ae196855922ab336f43b' }))));
+            }, 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", { key: '42e80b566fe4ee06b4a65777d37fd77975f619a0' }))));
     }
     static get is() { return "nano-input"; }
     static get encapsulation() { return "scoped"; }