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/accordion/accordion.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, transformTag } from "../../utils/renderer";
 import { getDirectChildren } from "../../utils/dom";
 import { createColorClasses } from "../../utils/theme";
 /**
@@ -20,8 +21,8 @@ export class Accordion {
     color;
     onToggleHandler(event) {
         event.stopPropagation();
-        const items = getDirectChildren(this.el, 'nano-details') ||
-            this.el.querySelectorAll('nano-details');
+        const items = getDirectChildren(this.el, transformTag('nano-details')) ||
+            this.el.querySelectorAll(transformTag('nano-details'));
         items.forEach((item, i) => {
             if (item !== event.target)
                 item.open = false;
@@ -36,10 +37,11 @@ export class Accordion {
         this.nanoToggle.emit();
     }
     render() {
-        return (h(Host, { key: '04218d48d43e211e98c808e19308f5ff530616f1', class: {
+        return (h(Host, { key: '60b444ced7959370455b575616c5e0cfe45ae85d', class: {
                 ...createColorClasses(this.color),
                 [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number',
-            } }, h("slot", { key: '47208f8dd5405fb037ead669df2da04fb38fdf77' })));
+                'nano-accordion': true,
+            } }, h("slot", { key: '53cb7e62571e9bc8e88a958a4b1a62550c4d797c' })));
     }
     static get is() { return "nano-accordion"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,~~CAAC,EACD,~~MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EAEJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD;;GAEG;AAMH,MAAM,OAAO,SAAS;IACX,UAAU,CAAU;IAElB,EAAE,CAA2B;IAExC;;OAEG;IACM,UAAU,CAAe;IAElC;;OAEG;IACK,KAAK,CAAS;IAGtB,eAAe,CAAC,KAAkB;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,KAAK,GACT,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;~~YAC1C~~,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;~~QAC3C~~,KAAK,CAAC,OAAO,CAAC,CAAC,IAA4B,EAAE,CAAC,EAAE,EAAE;YAChD,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM;gBAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;;gBACxC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe,CAAC,KAAkB;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;gBACjC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAC/B,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;~~aACtC~~;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n ~~h,\n~~ Listen,\n Element,\n Host,\n Prop,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\n\nimport { getDirectChildren } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\n/*\n Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n /\n@Component({\n tag: 'nano-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n @State() itemOpened?: number;\n\n @Element() el: HTMLNanoAccordionElement;\n\n /\n Fires when accordion elements toggle\n /\n @Event() nanoToggle: EventEmitter;\n\n /\n Color to use from the color palette.\n */\n @Prop() color?: Color;\n\n @Listen('nanoOpened')\n onToggleHandler(event: CustomEvent) {\n event.stopPropagation();\n\n const items =\n getDirectChildren(this.el, 'nano-details') \|\|\n this.el.querySelectorAll('nano-details');\n items.forEach((item: HTMLNanoDetailsElement, i) => {\n if (item !== event.target) item.open = false;\n else this.itemOpened = i;\n });\n this.nanoToggle.emit();\n }\n\n @Listen('nanoClosed')\n onClosedHandler(event: CustomEvent) {\n event.stopPropagation();\n this.itemOpened = null;\n this.nanoToggle.emit();\n }\n\n render() {\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n [`nano-color-${this.itemOpened}`]:\n typeof this.itemOpened === 'number',\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,MAAM,EACN,OAAO,EACP,IAAI,EACJ,IAAI,EAEJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGvD;;GAEG;AAMH,MAAM,OAAO,SAAS;IACX,UAAU,CAAU;IAElB,EAAE,CAA2B;IAExC;;OAEG;IACM,UAAU,CAAe;IAElC;;OAEG;IACK,KAAK,CAAS;IAGtB,eAAe,CAAC,KAAkB;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,KAAK,GACT,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;YACxD,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,KAAK,CAAC,OAAO,CAAC,CAAC,IAA4B,EAAE,CAAC,EAAE,EAAE;YAChD,IAAI,IAAI,KAAK,KAAK,CAAC,MAAM;gBAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;;gBACxC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAGD,eAAe,CAAC,KAAkB;QAChC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC;gBACjC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAC/B,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;gBACrC,gBAAgB,EAAE,IAAI;aACvB;YAED,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Listen,\n Element,\n Host,\n Prop,\n EventEmitter,\n Event,\n State,\n} from '@stencil/core';\n\nimport { h, transformTag } from '../../utils/renderer';\nimport { getDirectChildren } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\n/*\n Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n /\n@Component({\n tag: 'nano-accordion',\n styleUrl: 'accordion.scss',\n shadow: true,\n})\nexport class Accordion {\n @State() itemOpened?: number;\n\n @Element() el: HTMLNanoAccordionElement;\n\n /\n Fires when accordion elements toggle\n /\n @Event() nanoToggle: EventEmitter;\n\n /\n Color to use from the color palette.\n */\n @Prop() color?: Color;\n\n @Listen('nanoOpened')\n onToggleHandler(event: CustomEvent) {\n event.stopPropagation();\n\n const items =\n getDirectChildren(this.el, transformTag('nano-details')) \|\|\n this.el.querySelectorAll(transformTag('nano-details'));\n items.forEach((item: HTMLNanoDetailsElement, i) => {\n if (item !== event.target) item.open = false;\n else this.itemOpened = i;\n });\n this.nanoToggle.emit();\n }\n\n @Listen('nanoClosed')\n onClosedHandler(event: CustomEvent) {\n event.stopPropagation();\n this.itemOpened = null;\n this.nanoToggle.emit();\n }\n\n render() {\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n [`nano-color-${this.itemOpened}`]:\n typeof this.itemOpened === 'number',\n 'nano-accordion': true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/alert/alert.helpers.js CHANGED Viewed

@@ -1,6 +1,7 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
+import { transformTag } from "../../utils/renderer";
 const alertContent = (message, buttons = []) => {
     return `${message}
     ${buttons.length
@@ -35,7 +36,7 @@ export async function nanoShowToast(message, position = 'tr', icon, alertOptions
         ...alertOptions,
     };
     icon = icon || 'light/circle-info';
-    const alert = Object.assign(document.createElement('nano-alert'), {
+    const alert = Object.assign(document.createElement(transformTag('nano-alert')), {
         ...opts,
         open: false,
         innerHTML: `
@@ -69,7 +70,7 @@ export function nanoShowAlert(message, buttons = [], label, icon = 'light/circle
         ...alertOptions,
     };
     icon = icon || 'light/circle-info';
-    const alert = Object.assign(document.createElement('nano-alert'), {
+    const alert = Object.assign(document.createElement(transformTag('nano-alert')), {
         ...opts,
         open: false,
         innerHTML: `

package/dist/collection/components/alert/alert.helpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.helpers.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.helpers.ts"],"names":[],"mappings":"~~AAgBA~~,MAAM,YAAY,GAAG,CACnB,OAAe,EACf,UAAmC,EAAE,EACrC,EAAE;IACF,OAAO,GAAG,OAAO;MAEb,OAAO,CAAC,MAAM;QACZ,CAAC,CAAC,OAAO;aACJ,GAAG,CACF,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CACT,qBAAqB,CAAC,mBAAmB,GAAG,CAAC,OAAO,mBAAmB,GAAG,CAAC,OAAO,WAAW,CAChG;aACA,IAAI,CAAC,EAAE,CAAC;QACb,CAAC,CAAC,EACN,EAAE,CAAC;AACP,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CACrB,KAA2B,EAC3B,UAAmC,EAAE,EACrC,EAAE;IACF,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;QACnB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAC7D,CAAC,GAAgB,EAAE,EAAE;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAC3B,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,QAAQ,EAAE,CAC7C,CAAC;YACF,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACjC,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;YAClD,CAAC;QACH,CAAC,CACF,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,OAAe,EACf,WAA+B,IAAI,EACnC,IAAa,EACb,YAAqC,EACrC,UAAmC,EAAE;IAErC,MAAM,IAAI,GAA2B;QACnC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,IAAI;QACd,GAAG,YAAY;KAChB,CAAC;IACF,IAAI,GAAG,IAAI,IAAI,mBAAmB,CAAC;IACnC,MAAM,KAAK,GAAyB,MAAM,CAAC,MAAM,CAC/C,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,~~EACpC~~;QACE,GAAG,IAAI;QACP,IAAI,EAAE,KAAK;QACX,SAAS,EAAE;2BACU,IAAI;UACrB,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC;OACjC;KACF,CACF,CAAC;IACF,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAE/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,OAAO,IAAI,OAAO,CAAuB,CAAC,OAAO,EAAE,EAAE;QACnD,qBAAqB,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YAChC,MAAM,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YAC5B,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,aAAa,CAC3B,OAAe,EACf,UAAmC,EAAE,EACrC,KAAa,EACb,OAA2B,mBAAmB,EAC9C,eAAuC,EAAE;IAEzC,MAAM,IAAI,GAA2B;QACnC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,KAAK;QACf,GAAG,YAAY;KAChB,CAAC;IACF,IAAI,GAAG,IAAI,IAAI,mBAAmB,CAAC;IACnC,MAAM,KAAK,GAAyB,MAAM,CAAC,MAAM,CAC/C,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,~~EACpC~~;QACE,GAAG,IAAI;QACP,IAAI,EAAE,KAAK;QACX,SAAS,EAAE;UACP,IAAI,CAAC,CAAC,CAAC,oBAAoB,IAAI,4BAA4B,CAAC,CAAC,CAAC,EAAE;UAChE,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC;OACjC;KACF,CACF,CAAC;IACF,cAAc,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAE/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,OAAO,IAAI,OAAO,CAAuB,CAAC,OAAO,EAAE,EAAE;QACnD,UAAU,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACrB,MAAM,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACzB,OAAO,CAAC,KAAK,CAAC,CAAC;QACjB,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["import type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' \| 'tl' \| 'bl' \| 'br';\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/*\n `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon \|\| 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n requestAnimationFrame(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/\n `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string \| undefined = 'light/circle-info',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon \|\| 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement('nano-alert'),\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n"]}
1	+ {"version":3,"file":"alert.helpers.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { transformTag } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' \| 'tl' \| 'bl' \| 'br';\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/*\n `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n /\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon \|\| 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n requestAnimationFrame(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/\n `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string \| undefined = 'light/circle-info',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon \|\| 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n"]}

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

@@ -1,10 +1,11 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, Build, } from "@stencil/core";
+import { Host, Build, } from "@stencil/core";
 import Modal from "../../utils/modal";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
 import { createColorClasses } from "../../utils/theme";
+import { transformTag, h } from "../../utils/renderer";
 let toastStackTr;
 let toastStackTl;
 let toastStackBl;
@@ -167,7 +168,7 @@ export class Alert {
                 this.isToast = false;
                 resolve();
                 // Remove the toast stack from the DOM when there are no more alerts
-                if (!toastStack.querySelector('nano-alert')) {
+                if (!toastStack.querySelector(transformTag('nano-alert'))) {
                     toastStack.remove();
                 }
             };
@@ -271,18 +272,18 @@ export class Alert {
             }, tabIndex: this.isModal ? 0 : undefined, role: this.isModal ? 'alertdialog' : 'alert', "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.isShowing ? 'false' : 'true', "aria-modal": this.isModal ? 'true' : undefined, "aria-label": this.label ? this.label : undefined, onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd }, h("div", { class: "alert__content" }, h("div", { part: "icon", class: "alert__icon" }, h("slot", { name: "icon" })), h("div", { part: "message", class: "alert__message" }, h("slot", null)), this.closable && (h("div", { class: "alert__close" }, h("nano-icon-button", { class: "alert__close", iconName: "light/xmark", label: "close menu", onClick: this.handleCloseClick })))), h("div", { class: "alert__footer" }, h("slot", { name: "footer" }))));
     };
     render() {
-        return (h(Host, { key: '15bcc286efac5acab202d218203baee6737f385b', class: { ...createColorClasses(this.color) }, showing: this.isShowing }, this.isModal && [
-            h("div", { key: '22b78d8f7a22394f70c9d1457fb2dc5ec4b2556f', part: "overlay", class: {
+        return (h(Host, { key: '0279c18aae2396ad177089cc75566e883d90e13c', class: { ...createColorClasses(this.color), 'nano-alert': true }, showing: this.isShowing }, this.isModal && [
+            h("div", { key: 'bf3e853b342bdd95fa760ce9318c280fc7763ac6', part: "overlay", class: {
                     alert__overlay: true,
                     'alert__overlay--open': this.open,
                 }, ref: (div) => (this.overlay = div) }),
-            h("div", { key: 'f3fcf43f5c7dc42aa7bd9dd5cac214044af5f4f5', class: "alert__modal-wrap", onClick: (e) => {
+            h("div", { key: 'e1834c979a55eff1022d7c768d5d1f698afcfade', class: "alert__modal-wrap", onClick: (e) => {
                     if (!e.target.classList.contains('alert__modal-wrap'))
                         return;
                     this.noDismiss = true;
                     setTimeout(() => (this.noDismiss = false), 250);
-                } }, h(this.Panel, { key: '2a3dc3e67dcfd71a739652337f6384d55bd2247e' })),
-        ], !this.isModal && h(this.Panel, { key: '588ba40ffe5e9ba4d5b41838bda0c4f2ea11ea40' })));
+                } }, h(this.Panel, { key: 'd30e62e22c1ea9b97b57590d9fe926bb0623b893' })),
+        ], !this.isModal && h(this.Panel, { key: 'cd72c23c11e27ea221ca7ab3327288f34cd8a597' })));
     }
     static get is() { return "nano-alert"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n VNode,\n Build,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport type { Color } from '../../types/shared';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n });\n toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n });\n toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n });\n toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n });\n}\n\n/*\n Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n /\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement \| null;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n @State() noDismiss = false;\n\n @Element() host: HTMLNanoAlertElement;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n if (this.open) this.show();\n else this.hide();\n }\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The color to use from the application's color palette. /\n @Prop({ reflect: true }) color?: Color;\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /\n Relocate the dialog to the root of the DOM.\n * Most useful in conjunction with `alert()` when parental elements\n * have css stacking constraints which don't allow for `position: fixed`\n /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /\n Shows the alert.\n * @returns a promise that resolves after the alert is shown\n /\n @Method()\n async show() {\n if (this.goingToShow) return;\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n\n if (Build.isBrowser) {\n requestAnimationFrame(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n } else {\n this.isShowing = true;\n this.goingToShow = false;\n }\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /\n Hides the alert\n * @returns a promise that resolves after the alert is hidden\n /\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n requestAnimationFrame(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n \n @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n /\n @Method()\n async toast(position: 'tr' \| 'tl' \| 'bl' \| 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n const onClose = () => {\n this.host.remove();\n this.isToast = false;\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (!toastStack.querySelector('nano-alert')) {\n toastStack.remove();\n }\n };\n\n this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n this.host.addEventListener('nano-after-hide', onClose, { once: true });\n });\n }\n\n /\n Displays the alert as a dialog / modal - more akin to a traditional js alert().\n * @param label a label for assistive technology\n */\n @Method()\n async alert(label: string) {\n this.isModal = true;\n this.label = label;\n\n return new Promise<void>((resolve) => {\n if (!document.body.contains(this.host)) {\n document.body.appendChild(this.host);\n }\n\n this.modal.activate();\n lockBodyScrolling(this.host);\n this.originalTrigger = document.activeElement as HTMLElement;\n\n requestAnimationFrame(() => {\n this.show();\n });\n\n const onOpen = () =>\n requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n const onClose = () => {\n this.modal.deactivate();\n this.host.remove();\n this.label = undefined;\n this.isModal = false;\n resolve();\n\n // Restore focus to the original trigger\n if (\n this.originalTrigger &&\n typeof this.originalTrigger.focus === 'function'\n ) {\n setTimeout(() => this.originalTrigger.focus());\n }\n };\n\n this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nano-after-hide', onClose, {\n once: true,\n });\n });\n }\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n (event.target === this.panel \|\| event.target === this.overlay)\n ) {\n this.host.hidden = !this.open;\n this.isShowing = this.open;\n\n if (this.open) this.nanoAfterShow.emit();\n else this.nanoAfterHide.emit();\n }\n };\n\n private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n if (e.defaultPrevented) return;\n if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n this.hide();\n };\n\n private restartAutoHide = () => {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n };\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n this.handleHoistChange();\n this.host.addEventListener('click', this.handleButtonClick);\n this.isShowing = typeof this.host.getAttribute('showing') === 'string';\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.host.removeEventListener('click', this.handleButtonClick);\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open && !this.isShowing) {\n this.show();\n }\n }\n\n private Panel = (): VNode => {\n return (\n <div\n ref={(div) => (this.panel = div)}\n part=\"panel\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--toasty': this.isToast,\n 'alert--modal': !!this.isModal,\n 'alert--showing': this.isShowing,\n 'alert--nodismiss': this.noDismiss,\n }}\n tabIndex={this.isModal ? 0 : undefined}\n role={this.isModal ? 'alertdialog' : 'alert'}\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.isShowing ? 'false' : 'true'}\n aria-modal={this.isModal ? 'true' : undefined}\n aria-label={this.label ? this.label : undefined}\n onMouseMove={this.handleMouseMove}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div class=\"alert__content\">\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </div>\n <div part=\"message\" class=\"alert__message\">\n <slot />\n </div>\n {this.closable && (\n <div class=\"alert__close\">\n <nano-icon-button\n class=\"alert__close\"\n iconName=\"light/xmark\"\n label=\"close menu\"\n onClick={this.handleCloseClick}\n ></nano-icon-button>\n </div>\n )}\n </div>\n <div class=\"alert__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n showing={this.isShowing}\n >\n {this.isModal && [\n <div\n part=\"overlay\"\n class={{\n alert__overlay: true,\n 'alert__overlay--open': this.open,\n }}\n ref={(div) => (this.overlay = div)}\n />,\n <div\n class=\"alert__modal-wrap\"\n onClick={(e: MouseEvent & { target: HTMLElement }) => {\n if (!e.target.classList.contains('alert__modal-wrap')) return;\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }}\n >\n <this.Panel />\n </div>,\n ]}\n {!this.isModal && <this.Panel />}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n Host,\n VNode,\n Build,\n} from '@stencil/core';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\nlet toastStackTr: HTMLElement;\nlet toastStackTl: HTMLElement;\nlet toastStackBl: HTMLElement;\nlet toastStackBr: HTMLElement;\n\nif (globalThis['document']) {\n toastStackTr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tr',\n });\n toastStackTl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--tl',\n });\n toastStackBl = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--bl',\n });\n toastStackBr = Object.assign(document.createElement('div'), {\n className: 'nano-toast-stack nano-toast-stack--br',\n });\n}\n\n/*\n Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n /\n@Component({\n tag: 'nano-alert',\n styleUrl: 'alert.scss',\n shadow: true,\n})\nexport class Alert implements ComponentInterface {\n private autoHideTimeout: ReturnType<typeof setTimeout>;\n private panel: HTMLElement;\n private overlay: HTMLElement;\n private modal: Modal;\n private originalTrigger: HTMLElement \| null;\n private goingToHide = false;\n private goingToShow = false;\n\n @State() isModal = false;\n @State() isToast = false;\n @State() isShowing = false;\n @State() label: string;\n @State() noDismiss = false;\n\n @Element() host: HTMLNanoAlertElement;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch('open')\n handleOpenChange() {\n if (this.open) this.show();\n else this.hide();\n }\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The color to use from the application's color palette. /\n @Prop({ reflect: true }) color?: Color;\n\n /\n The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n /\n @Prop() duration = Infinity;\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /\n Relocate the dialog to the root of the DOM.\n * Most useful in conjunction with `alert()` when parental elements\n * have css stacking constraints which don't allow for `position: fixed`\n /\n @Prop() hoist = false;\n\n @Watch('hoist')\n handleHoistChange() {\n if (!this.hoist \|\| document.body.children[0] === this.host) return;\n document.body.prepend(this.host);\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n /\n Shows the alert.\n * @returns a promise that resolves after the alert is shown\n /\n @Method()\n async show() {\n if (this.goingToShow) return;\n\n const nanoShow = this.nanoShow.emit();\n if (nanoShow.defaultPrevented) {\n this.open = false;\n return false;\n }\n\n this.host.hidden = false;\n this.goingToShow = true;\n this.open = true;\n\n if (Build.isBrowser) {\n requestAnimationFrame(() => {\n this.isShowing = true;\n this.goingToShow = false;\n });\n } else {\n this.isShowing = true;\n this.goingToShow = false;\n }\n\n if (this.duration < Infinity) {\n clearTimeout(this.autoHideTimeout);\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /\n Hides the alert\n * @returns a promise that resolves after the alert is hidden\n /\n @Method()\n async hide() {\n if (this.goingToHide) {\n return;\n }\n const nanoHide = this.nanoHide.emit();\n\n if (nanoHide.defaultPrevented) {\n this.open = true;\n return false;\n }\n this.goingToHide = true;\n this.open = false;\n\n requestAnimationFrame(() => (this.goingToHide = false));\n clearTimeout(this.autoHideTimeout);\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n \n @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n * @returns a promise which will resolve after the alert has hidden\n /\n @Method()\n async toast(position: 'tr' \| 'tl' \| 'bl' \| 'br' = 'tr') {\n this.isToast = true;\n return new Promise<void>((resolve) => {\n let toastStack: HTMLElement;\n switch (position) {\n case 'tl':\n toastStack = toastStackTl;\n break;\n case 'bl':\n toastStack = toastStackBl;\n break;\n case 'br':\n toastStack = toastStackBr;\n break;\n default:\n toastStack = toastStackTr;\n break;\n }\n\n if (!toastStack.parentElement) {\n document.body.appendChild(toastStack);\n }\n\n toastStack.appendChild(this.host);\n this.connectedCallback();\n this.show();\n\n const onClose = () => {\n this.host.remove();\n this.isToast = false;\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (!toastStack.querySelector(transformTag('nano-alert'))) {\n toastStack.remove();\n }\n };\n\n this.host.addEventListener('nanoAfterHide', onClose, { once: true });\n this.host.addEventListener('nano-after-hide', onClose, { once: true });\n });\n }\n\n /\n Displays the alert as a dialog / modal - more akin to a traditional js alert().\n * @param label a label for assistive technology\n */\n @Method()\n async alert(label: string) {\n this.isModal = true;\n this.label = label;\n\n return new Promise<void>((resolve) => {\n if (!document.body.contains(this.host)) {\n document.body.appendChild(this.host);\n }\n\n this.modal.activate();\n lockBodyScrolling(this.host);\n this.originalTrigger = document.activeElement as HTMLElement;\n\n requestAnimationFrame(() => {\n this.show();\n });\n\n const onOpen = () =>\n requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));\n\n const onClose = () => {\n this.modal.deactivate();\n this.host.remove();\n this.label = undefined;\n this.isModal = false;\n resolve();\n\n // Restore focus to the original trigger\n if (\n this.originalTrigger &&\n typeof this.originalTrigger.focus === 'function'\n ) {\n setTimeout(() => this.originalTrigger.focus());\n }\n };\n\n this.host.addEventListener('nanoAfterShow', onOpen, { once: true });\n this.host.addEventListener('nano-after-show', onOpen, { once: true });\n\n this.host.addEventListener('nanoAfterHide', onClose, {\n once: true,\n });\n this.host.addEventListener('nano-after-hide', onClose, {\n once: true,\n });\n });\n }\n\n private handleMouseMove = () => {\n this.restartAutoHide();\n };\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (\n event.propertyName === 'opacity' &&\n (event.target === this.panel \|\| event.target === this.overlay)\n ) {\n this.host.hidden = !this.open;\n this.isShowing = this.open;\n\n if (this.open) this.nanoAfterShow.emit();\n else this.nanoAfterHide.emit();\n }\n };\n\n private handleButtonClick = (e: PointerEvent & { target: HTMLElement }) => {\n if (e.defaultPrevented) return;\n if (e.target.tagName && e.target.tagName.toLowerCase() === 'button')\n this.hide();\n };\n\n private restartAutoHide = () => {\n clearTimeout(this.autoHideTimeout);\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n }\n };\n\n connectedCallback() {\n this.modal = new Modal(this.host);\n this.handleHoistChange();\n this.host.addEventListener('click', this.handleButtonClick);\n this.isShowing = typeof this.host.getAttribute('showing') === 'string';\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n this.host.removeEventListener('click', this.handleButtonClick);\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open && !this.isShowing) {\n this.show();\n }\n }\n\n private Panel = (): VNode => {\n return (\n <div\n ref={(div) => (this.panel = div)}\n part=\"panel\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--toasty': this.isToast,\n 'alert--modal': !!this.isModal,\n 'alert--showing': this.isShowing,\n 'alert--nodismiss': this.noDismiss,\n }}\n tabIndex={this.isModal ? 0 : undefined}\n role={this.isModal ? 'alertdialog' : 'alert'}\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.isShowing ? 'false' : 'true'}\n aria-modal={this.isModal ? 'true' : undefined}\n aria-label={this.label ? this.label : undefined}\n onMouseMove={this.handleMouseMove}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div class=\"alert__content\">\n <div part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </div>\n <div part=\"message\" class=\"alert__message\">\n <slot />\n </div>\n {this.closable && (\n <div class=\"alert__close\">\n <nano-icon-button\n class=\"alert__close\"\n iconName=\"light/xmark\"\n label=\"close menu\"\n onClick={this.handleCloseClick}\n ></nano-icon-button>\n </div>\n )}\n </div>\n <div class=\"alert__footer\">\n <slot name=\"footer\" />\n </div>\n </div>\n );\n };\n\n render() {\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-alert': true }}\n showing={this.isShowing}\n >\n {this.isModal && [\n <div\n part=\"overlay\"\n class={{\n alert__overlay: true,\n 'alert__overlay--open': this.open,\n }}\n ref={(div) => (this.overlay = div)}\n />,\n <div\n class=\"alert__modal-wrap\"\n onClick={(e: MouseEvent & { target: HTMLElement }) => {\n if (!e.target.classList.contains('alert__modal-wrap')) return;\n this.noDismiss = true;\n setTimeout(() => (this.noDismiss = false), 250);\n }}\n >\n <this.Panel />\n </div>,\n ]}\n {!this.isModal && <this.Panel />}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/algolia/algolia-filter.js CHANGED Viewed

@@ -1,8 +1,9 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, writeTask, } from "@stencil/core";
+import { Host, writeTask, } from "@stencil/core";
 import { ComponentStore, } from "../../utils/store/component-store";
+import { h } from "../../utils/renderer";
 import { Wormhole, } from "./algolia-data";
 /**
  * Displays and syncs algolia filters
@@ -276,9 +277,10 @@ export class AlgoliaFilter {
             this.showFilter = true;
     }
     render() {
-        return (h(Host, { key: '7fceca55176bed53e7b205f9a76d7756d77d1525', class: {
+        return (h(Host, { key: '81d343828cf739b8e85cab7f56fa48ad1c3fc34e', class: {
                 'show-filter': this.showFilter,
-            } }, h("div", { key: '9a4de79e4b28d167a4dd1ff2d92381e2a2e942a7', ref: (div) => (this.outputEle = div) }, h("slot", { key: '112ec321906665e4ba7b3e0c8377bfb49d12b6de', name: "output" }))));
+                'nano-filter': true,
+            } }, h("div", { key: '909831f2c2e4605163227a188df31b3b130fd7d1', ref: (div) => (this.outputEle = div) }, h("slot", { key: '854cff616358aaee8cb6594db55a4a49d4322b74', name: "output" }))));
     }
     static get is() { return "nano-algolia-filter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/algolia/algolia-filter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"algolia-filter.js","sourceRoot":"","sources":["../../../../src/components/algolia/algolia-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Prop,\n Watch,\n State,\n EventEmitter,\n Event,\n writeTask,\n Listen,\n} from '@stencil/core';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport {\n SearchChangeEvent,\n Wormhole,\n WormholeConsumerConstructor,\n} from './algolia-data';\nimport type {\n IndexResult,\n FilterChangeEventDetail,\n AlgoliaFacet,\n} from './algolia-interface';\n\n/*\n Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-filter',\n shadow: true,\n styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n @Element() el: HTMLNanoAlgoliaFilterElement;\n\n private templateStr: string;\n private templateSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLElement;\n private filterId: string = null;\n private tplDidRnder;\n private tplWillRnder = new Promise((resolve) => {\n this.tplDidRnder = resolve;\n });\n\n @State() changeEvent: SearchChangeEvent;\n @State() internalValue: Array<string> = [undefined];\n @State() showFilter: boolean = false;\n @State() indexResults: IndexResult = null;\n @State() filterChanged: string = null;\n @State() facets: AlgoliaFacet;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() globalStoreMethod: StorageMethods;\n\n /\n Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n /\n @Prop() filterName: string = null;\n\n /\n Set values of this filter. Will result in form elements being selected. '\|' delimited string or array.\n /\n @Prop({ mutable: true }) value: string \| Array<string> = '';\n\n /\n The internal operator joining filter values.\n /\n @Prop() operator: 'or' \| 'and' = 'or';\n\n /\n Store search queries (against this ID) to the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Emitted when the filter value changes\n /\n @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n // Public facing. When changed attempts to 'check' any relevant fields in the template.\n @Watch('value')\n valueSet() {\n const valStr = this.value as string;\n let vals;\n\n if (typeof valStr === 'string')\n vals = valStr.length ? valStr.split('\|') : [];\n else vals = this.value as Array<string>;\n\n if (this.didValueChange(vals)) {\n const foundVals = this.setFieldValues(vals);\n // found in template, set the internal state (this emits the changed event)\n if (foundVals && foundVals.length) this.internalValue = vals;\n // not found in template, wait for it to render.\n else {\n this.tplWillRnder.then((_) => {\n this.setFieldValues(vals);\n this.internalValue = vals;\n });\n }\n }\n }\n\n // Value has changed and is reflected in template. Emit event.\n @Watch('internalValue')\n valueChanged() {\n this.value = this.internalValue;\n this.nanoFilterChanged.emit({\n filterId: this.filterId,\n facetName: this.filterName,\n value: this.internalValue,\n operator: this.operator,\n });\n }\n\n // New facets from algolia. Update template\n @Watch('facets')\n appliedFilterChanged() {\n if (\n this.filterName &&\n this.filterChanged &&\n (this.filterChanged !== this.filterId \|\| this.operator === 'and')\n ) {\n this.updateContent();\n }\n }\n\n @Watch('tplRenderFn')\n tplUpdate() {\n this.updateContent();\n }\n\n @Watch('indexResults')\n handleFilterChange() {\n if (this.indexResults && this.indexResults.appliedFilters) {\n const foundValue = this.indexResults.appliedFilters.find(\n (filter) => filter.name === this.filterName\n );\n if (!foundValue) return;\n\n this.tplWillRnder.then((_) => {\n const foundVals = this.setFieldValues(foundValue.values);\n if (foundVals && foundVals.length) this.value = foundVals;\n });\n }\n this.updateContent();\n }\n\n @Listen('nanoChange')\n @Listen('change')\n handleChangeEvent() {\n const vals = this.getFieldValues();\n if (this.didValueChange(vals)) {\n this.internalValue = vals;\n return true;\n }\n return false;\n }\n\n private updateContent() {\n const outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.el) return;\n\n // there's no template so show output right away\n if (!this.templateStr) this.showFilter = true;\n // there's a template but no index set so hide filters atm\n else if (\n !this.filterName \|\|\n !outputTo \|\|\n (this.templateStr &&\n (!this.indexResults \|\| !this.indexResults.origFilters[this.filterName]))\n ) {\n this.showFilter = false;\n }\n\n // there's no output element so nothing else to do\n if (!outputTo) return;\n\n // there's no index set atm but get any static filter values so we can apply them\n if (!this.indexResults) {\n if (this.templateStr) {\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: {},\n dyn: {},\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n });\n } else if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n return;\n }\n\n // everything is in place - render as normal and set values\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: { ...this.indexResults.origFilters[this.filterName] },\n dyn: { ...this.indexResults.dynFilters[this.filterName] },\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n this.tplDidRnder();\n this.setFieldValues();\n\n if (!this.showFilter) this.showFilter = true;\n this.nanoTplUpdated.emit(this.el);\n });\n }\n\n // go through form elements and extract their current value\n private getFieldValues() {\n const values = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n // If a multi-select, get all selections\n if (field.type === 'select-multiple') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!select.options[n].selected \|\| !select.options[n].value.length)\n continue;\n values.push(select.options[n].value);\n }\n } else if (\n (field.type !== 'checkbox' && field.type !== 'radio') \|\|\n (field.checked && field.value.length)\n ) {\n values.push(field.value);\n }\n }\n return values;\n }\n\n // go through form elements and select / check them as appropriate\n private setFieldValues(vals?: string[]): void \| string[] {\n vals = vals \|\| this.internalValue;\n if (!vals) return;\n\n const found = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n if (\n field.disabled \|\|\n field.type === 'file' \|\|\n field.type === 'reset' \|\|\n field.type === 'submit' \|\|\n field.type === 'button'\n )\n continue;\n\n if (field.type === 'select-multiple' \|\| field.type === 'select-one') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!vals.includes(select.options[n].value))\n select.options[n].selected = false;\n else {\n found.push(select.value);\n select.options[n].selected = true;\n if (field.type === 'select-one')\n select.value = select.options[n].value;\n }\n }\n } else if (\n ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n field.type\n )\n ) {\n if (vals.includes(field.value)) {\n found.push(field.value);\n field.checked = true;\n } else if (!vals.length && !field.value.length) {\n field.checked = true;\n } else field.checked = false;\n }\n }\n return found;\n }\n\n private didValueChange(newVal: Array<string>) {\n if (!!this.internalValue && !newVal) return true;\n if (!this.internalValue && !newVal) return false;\n if (this.internalValue && newVal.length !== this.internalValue.length)\n return true;\n\n let hasChanged = false;\n for (let i = 0; i < newVal.length; i++) {\n if (\n !hasChanged &&\n (!this.internalValue \|\| !this.internalValue.includes(newVal[i]))\n )\n hasChanged = true;\n }\n return hasChanged;\n }\n\n connectedCallback() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n this.filterId = this.filterName + '_' + filterIds++;\n\n if (this.templateSlot) {\n this.templateStr = this.templateSlot.innerHTML;\n this.templateStr = this.templateStr.replace(/=>/gm, '=>');\n }\n }\n\n componentWillLoad() {\n if (this.storeId)\n ComponentStore.init(\n this,\n ['value'],\n this.storeMethod \|\| this.globalStoreMethod,\n this.storeId\n );\n }\n\n componentDidLoad() {\n this.updateContent();\n\n if (\n this.templateStr &&\n this.filterName &&\n this.indexResults &&\n this.indexResults.origFilters[this.filterName]\n )\n this.showFilter = true;\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-filter': this.showFilter,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n 'globalStoreMethod',\n 'indexResults',\n 'filterChanged',\n 'facets',\n 'tplRenderFn',\n 'changeEvent',\n]);\nlet filterIds = 0;\n"]}
1	+ {"version":3,"file":"algolia-filter.js","sourceRoot":"","sources":["../../../../src/components/algolia/algolia-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n Watch,\n State,\n EventEmitter,\n Event,\n writeTask,\n Listen,\n} from '@stencil/core';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { h } from '../../utils/renderer';\nimport {\n SearchChangeEvent,\n Wormhole,\n WormholeConsumerConstructor,\n} from './algolia-data';\nimport type {\n IndexResult,\n FilterChangeEventDetail,\n AlgoliaFacet,\n} from './algolia-interface';\n\n/*\n Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-filter',\n shadow: true,\n styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n @Element() el: HTMLNanoAlgoliaFilterElement;\n\n private templateStr: string;\n private templateSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLElement;\n private filterId: string = null;\n private tplDidRnder;\n private tplWillRnder = new Promise((resolve) => {\n this.tplDidRnder = resolve;\n });\n\n @State() changeEvent: SearchChangeEvent;\n @State() internalValue: Array<string> = [undefined];\n @State() showFilter: boolean = false;\n @State() indexResults: IndexResult = null;\n @State() filterChanged: string = null;\n @State() facets: AlgoliaFacet;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() globalStoreMethod: StorageMethods;\n\n /\n Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n /\n @Prop() filterName: string = null;\n\n /\n Set values of this filter. Will result in form elements being selected. '\|' delimited string or array.\n /\n @Prop({ mutable: true }) value: string \| Array<string> = '';\n\n /\n The internal operator joining filter values.\n /\n @Prop() operator: 'or' \| 'and' = 'or';\n\n /\n Store search queries (against this ID) to the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Emitted when the filter value changes\n /\n @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n // Public facing. When changed attempts to 'check' any relevant fields in the template.\n @Watch('value')\n valueSet() {\n const valStr = this.value as string;\n let vals;\n\n if (typeof valStr === 'string')\n vals = valStr.length ? valStr.split('\|') : [];\n else vals = this.value as Array<string>;\n\n if (this.didValueChange(vals)) {\n const foundVals = this.setFieldValues(vals);\n // found in template, set the internal state (this emits the changed event)\n if (foundVals && foundVals.length) this.internalValue = vals;\n // not found in template, wait for it to render.\n else {\n this.tplWillRnder.then((_) => {\n this.setFieldValues(vals);\n this.internalValue = vals;\n });\n }\n }\n }\n\n // Value has changed and is reflected in template. Emit event.\n @Watch('internalValue')\n valueChanged() {\n this.value = this.internalValue;\n this.nanoFilterChanged.emit({\n filterId: this.filterId,\n facetName: this.filterName,\n value: this.internalValue,\n operator: this.operator,\n });\n }\n\n // New facets from algolia. Update template\n @Watch('facets')\n appliedFilterChanged() {\n if (\n this.filterName &&\n this.filterChanged &&\n (this.filterChanged !== this.filterId \|\| this.operator === 'and')\n ) {\n this.updateContent();\n }\n }\n\n @Watch('tplRenderFn')\n tplUpdate() {\n this.updateContent();\n }\n\n @Watch('indexResults')\n handleFilterChange() {\n if (this.indexResults && this.indexResults.appliedFilters) {\n const foundValue = this.indexResults.appliedFilters.find(\n (filter) => filter.name === this.filterName\n );\n if (!foundValue) return;\n\n this.tplWillRnder.then((_) => {\n const foundVals = this.setFieldValues(foundValue.values);\n if (foundVals && foundVals.length) this.value = foundVals;\n });\n }\n this.updateContent();\n }\n\n @Listen('nanoChange')\n @Listen('change')\n handleChangeEvent() {\n const vals = this.getFieldValues();\n if (this.didValueChange(vals)) {\n this.internalValue = vals;\n return true;\n }\n return false;\n }\n\n private updateContent() {\n const outputTo = this.outputSlot \|\| this.outputEle;\n if (!this.el) return;\n\n // there's no template so show output right away\n if (!this.templateStr) this.showFilter = true;\n // there's a template but no index set so hide filters atm\n else if (\n !this.filterName \|\|\n !outputTo \|\|\n (this.templateStr &&\n (!this.indexResults \|\| !this.indexResults.origFilters[this.filterName]))\n ) {\n this.showFilter = false;\n }\n\n // there's no output element so nothing else to do\n if (!outputTo) return;\n\n // there's no index set atm but get any static filter values so we can apply them\n if (!this.indexResults) {\n if (this.templateStr) {\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: {},\n dyn: {},\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n });\n } else if (!this.value \|\| !this.value.length) this.handleChangeEvent();\n return;\n }\n\n // everything is in place - render as normal and set values\n writeTask(() => {\n outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n orig: { ...this.indexResults.origFilters[this.filterName] },\n dyn: { ...this.indexResults.dynFilters[this.filterName] },\n selected:\n this.internalValue && this.internalValue.length\n ? this.internalValue\n : this.value,\n });\n this.tplDidRnder();\n this.setFieldValues();\n\n if (!this.showFilter) this.showFilter = true;\n this.nanoTplUpdated.emit(this.el);\n });\n }\n\n // go through form elements and extract their current value\n private getFieldValues() {\n const values = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n // If a multi-select, get all selections\n if (field.type === 'select-multiple') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!select.options[n].selected \|\| !select.options[n].value.length)\n continue;\n values.push(select.options[n].value);\n }\n } else if (\n (field.type !== 'checkbox' && field.type !== 'radio') \|\|\n (field.checked && field.value.length)\n ) {\n values.push(field.value);\n }\n }\n return values;\n }\n\n // go through form elements and select / check them as appropriate\n private setFieldValues(vals?: string[]): void \| string[] {\n vals = vals \|\| this.internalValue;\n if (!vals) return;\n\n const found = [];\n const fields = this.outputSlot.querySelectorAll(\n 'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n );\n\n for (let i = 0; i < fields.length; i++) {\n const field = fields[i] as HTMLInputElement;\n\n if (\n field.disabled \|\|\n field.type === 'file' \|\|\n field.type === 'reset' \|\|\n field.type === 'submit' \|\|\n field.type === 'button'\n )\n continue;\n\n if (field.type === 'select-multiple' \|\| field.type === 'select-one') {\n const select: HTMLSelectElement = field as any;\n for (let n = 0; n < select.options.length; n++) {\n if (!vals.includes(select.options[n].value))\n select.options[n].selected = false;\n else {\n found.push(select.value);\n select.options[n].selected = true;\n if (field.type === 'select-one')\n select.value = select.options[n].value;\n }\n }\n } else if (\n ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n field.type\n )\n ) {\n if (vals.includes(field.value)) {\n found.push(field.value);\n field.checked = true;\n } else if (!vals.length && !field.value.length) {\n field.checked = true;\n } else field.checked = false;\n }\n }\n return found;\n }\n\n private didValueChange(newVal: Array<string>) {\n if (!!this.internalValue && !newVal) return true;\n if (!this.internalValue && !newVal) return false;\n if (this.internalValue && newVal.length !== this.internalValue.length)\n return true;\n\n let hasChanged = false;\n for (let i = 0; i < newVal.length; i++) {\n if (\n !hasChanged &&\n (!this.internalValue \|\| !this.internalValue.includes(newVal[i]))\n )\n hasChanged = true;\n }\n return hasChanged;\n }\n\n connectedCallback() {\n this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n this.filterId = this.filterName + '_' + filterIds++;\n\n if (this.templateSlot) {\n this.templateStr = this.templateSlot.innerHTML;\n this.templateStr = this.templateStr.replace(/=>/gm, '=>');\n }\n }\n\n componentWillLoad() {\n if (this.storeId)\n ComponentStore.init(\n this,\n ['value'],\n this.storeMethod \|\| this.globalStoreMethod,\n this.storeId\n );\n }\n\n componentDidLoad() {\n this.updateContent();\n\n if (\n this.templateStr &&\n this.filterName &&\n this.indexResults &&\n this.indexResults.origFilters[this.filterName]\n )\n this.showFilter = true;\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-filter': this.showFilter,\n 'nano-filter': true,\n }}\n >\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n 'globalStoreMethod',\n 'indexResults',\n 'filterChanged',\n 'facets',\n 'tplRenderFn',\n 'changeEvent',\n]);\nlet filterIds = 0;\n"]}

package/dist/collection/components/algolia/algolia-pagination.js CHANGED Viewed

@@ -55,9 +55,9 @@ export class AlgoliaPagination {
         this.updateContent();
     }
     render() {
-        return (h(Host, { key: '3168d162f59e4a753d3b1c1557ccdd502de66cbb', class: {
+        return (h(Host, { key: '12cc1de8e3bfe96c0368ff394eb6a2cfdf0344c8', class: {
                 'show-pagination': this.show,
-            } }, h("div", { key: 'e90d2eeaef3131be78bb6bebfd4e62c3e2abf708', ref: (div) => (this.outputEle = div) }, h("slot", { key: '36e2f104745f285da532c099c863a6ac48e3f265', name: "output" }))));
+            } }, h("div", { key: '70dc4683c476084346dc69246acb2092719d0b60', ref: (div) => (this.outputEle = div) }, h("slot", { key: '04f51858db37f6a25cae5fead48c5016a4159944', name: "output" }))));
     }
     static get is() { return "nano-algolia-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/algolia/algolia-results.js CHANGED Viewed

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, Build, readTask, } from "@stencil/core";
+import { Host, Build, readTask, } from "@stencil/core";
+import { h } from "../../utils/renderer";
 import { Wormhole, SearchChangeEvent } from "./algolia-data";
 /**
  * Displays and syncs results from Algolia searches.
@@ -198,9 +199,10 @@ export class AlgoliaResults {
         }
     }
     render() {
-        return (h(Host, { key: '4147d35d40d51e93ad297d55b78c7cb19b6b20c1', class: {
+        return (h(Host, { key: 'e5124d09c5619d77f6debca38bd5059ecfb9dce5', class: {
                 'show-results': this.showResults,
-            } }, h("div", { key: '354c9705a9650c00ab1e4787cf4ff9673d47e6bf', class: "default" }, h("slot", { key: 'afc1b38a92df5498f471e09137e214899c93b99a' })), h("div", { key: '904cf500535009e93fff280964c57f7b00f5c9bd', ref: (div) => (this.outputEle = div) }, h("slot", { key: '46724c1448e12efab63f79d29dfff8d45be29150', name: "start-output" }), h("slot", { key: '14f524dae0de0418dbc34dbe0878552a36876173', name: "result-output" }), h("div", { key: '065e03e12a29882464e89ec74664eb2613c60ebf', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: 'ee51e59caa058ba382c1e361f1d538b863ff2a6d', name: "end-output" }))));
+                'nano-results': true,
+            } }, h("div", { key: '773924ac30cd4e8c57d6767f96a8c9173d6e9ec6', class: "default" }, h("slot", { key: '5a330fe6afa15143c006fc3690d1ddb0ccf3bc8d' })), h("div", { key: '3a716202a7364efa1eeb90ea525670c4da5fc7e1', ref: (div) => (this.outputEle = div) }, h("slot", { key: 'af5860bd4dc7e2472d18f1b86175f5772bac426b', name: "start-output" }), h("slot", { key: '7b57ec404897b71f60a06ca661558624d5db1ac0', name: "result-output" }), h("div", { key: 'cff39c4ed229e1081f9160d8a447d56841209b4e', ref: (div) => (this.infiniteScrollBar = div) }), h("slot", { key: '79c19d45895d5f7a285e0beb640f84251d37b558', name: "end-output" }))));
     }
     static get is() { return "nano-algolia-results"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/algolia/algolia-results.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"algolia-results.js","sourceRoot":"","sources":["../../../../src/components/algolia/algolia-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Element,\n Host,\n Watch,\n State,\n Build,\n EventEmitter,\n Event,\n Prop,\n readTask,\n} from '@stencil/core';\nimport { Wormhole, SearchChangeEvent } from './algolia-data';\nimport type {\n IndexResult,\n AlgoliaResultHit,\n PageChangeEventDetail,\n AlgoliaFacet,\n} from './algolia-interface';\n\n/*\n Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-results',\n shadow: true,\n})\nexport class AlgoliaResults {\n @Element() el: HTMLNanoAlgoliaResultsElement;\n\n private resultTpl: string;\n private resultTplSlot: HTMLElement;\n private startTpl: string;\n private startTplSlot: HTMLElement;\n private endTpl: string;\n private endTplSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLDivElement;\n private outputTo: HTMLElement;\n private startOutputSlot: HTMLElement;\n private endOutputSlot: HTMLElement;\n\n private io?: IntersectionObserver;\n private infiniteScrollBar: HTMLDivElement;\n private append: boolean = false;\n private shouldClear: boolean = true;\n private currHitNum: number = 0;\n\n @State() showResults: boolean = false;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() results: AlgoliaResultHit[] = null;\n @State() indexResults: IndexResult = null;\n @State() resultsPage: number = 0;\n @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n @State() facets: AlgoliaFacet;\n @State() isLoading: boolean = true;\n\n /\n Load and append pages automatically on scroll\n /\n @Prop() infiniteScroll: boolean = false;\n\n /\n Whether new pages loaded by pagination will replace or be appended to the results block\n * (this will be ignored if 'infiniteScroll' is set to true)\n /\n @Prop() appendPages: boolean = false;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n // For append / infinite-scroll it's useful to have a universal index on render\n @Watch('results')\n addContentIndex() {\n this.shouldPageClear();\n if (this.shouldClear \|\| this.resultsPage === 0) this.currHitNum = 0;\n if (this.indexResults && this.indexResults.results) {\n this.indexResults.results.map((res) => {\n (res as any)._uIndex = this.currHitNum++;\n });\n }\n }\n\n // Update content template and perhaps add IO for infinite scrolling\n @Watch('results')\n @Watch('tplRenderFn')\n resultsChange() {\n this.shouldPageClear();\n // console.log('going to do update', this.resultsPage, this.results.length);\n this.updateResultContent();\n this.infiniteScrollChange();\n }\n\n // We have a foot / head slot template.\n // Can be useful to display current filter / search meta\n @Watch('facets')\n headerFooterChange() {\n this.updateStartEndContent();\n }\n\n @Watch('appendPages')\n appendChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n }\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n if (this.infiniteScroll) this.attachIO();\n else this.detachIO();\n }\n\n @Watch('resultsPage')\n handlePageChage() {\n if (this.infiniteScroll) this.attachIO();\n else this.detachIO();\n }\n\n @Watch('isLoading')\n handleLoading() {\n if (!this.isLoading) this.infiniteScrollChange();\n }\n\n // Decide whether incoming content should clear or not.\n // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n // Then leave up to the current, set append behaviour. Other clear it all out.\n private shouldPageClear() {\n this.shouldClear =\n this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n }\n\n // Called by IO. Emits page change event to parent which then iterated the global page count.\n private nextPage() {\n this.shouldClear = !this.append;\n this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n }\n\n private attachIO() {\n if (\n !this.infiniteScrollBar \|\|\n !this.infiniteScroll \|\|\n this.io \|\|\n !Build.isBrowser \|\|\n typeof window === 'undefined' \|\|\n !(window as any).IntersectionObserver\n )\n return;\n\n this.io = new (window as any).IntersectionObserver(\n async (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n this.nextPage();\n this.detachIO();\n }\n },\n { document, rootMargin: '100px', threshold: 1 }\n );\n this.io.observe(this.infiniteScrollBar);\n }\n\n private detachIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n private updateStartEndContent() {\n // clear start slot if present\n if (this.startTpl && this.startOutputSlot) {\n this.startOutputSlot.innerHTML = this.tplRenderFn(\n this.startTpl,\n this.indexResults\n );\n }\n // clear end slot if present\n if (this.endOutputSlot && this.endTpl) {\n this.endOutputSlot.innerHTML = this.tplRenderFn(\n this.endTpl,\n this.indexResults\n );\n }\n this.nanoTplUpdated.emit(this.el);\n }\n\n private updateResultContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n\n if (!this.resultTpl \|\| !this.indexResults) return;\n\n // after filtering or new index - clear all content.\n // after pagination when the 'appendPages' set to true - don't clear results content\n if (this.shouldClear) this.outputTo.innerHTML = '';\n\n if (!this.tplRenderFn) return;\n\n const div = document.createElement('div');\n div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n Array.from(div.children).forEach((child) => {\n this.outputTo.appendChild(child);\n });\n\n this.shouldClear = true;\n this.nanoTplUpdated.emit(this.el);\n }\n\n connectedCallback() {\n readTask(() => {\n this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n if (this.startTplSlot) {\n this.startTpl = this.startTplSlot.innerHTML;\n this.startTpl = this.startTpl.replace(/=>/gm, '=>');\n }\n\n this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n if (this.resultTplSlot) {\n this.resultTpl = this.resultTplSlot.innerHTML;\n this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');\n }\n\n this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n if (this.endTplSlot) {\n this.endTpl = this.endTplSlot.innerHTML;\n this.endTpl = this.endTpl.replace(/=>/gm, '=>');\n }\n if (this.indexResults) {\n this.addContentIndex();\n this.updateResultContent();\n }\n });\n }\n\n componentDidLoad() {\n this.updateStartEndContent();\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-results': this.showResults,\n }}\n >\n <div class=\"default\">\n <slot />\n </div>\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"start-output\" />\n <slot name=\"result-output\" />\n <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n <slot name=\"end-output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaResults, [\n 'indexResults',\n 'results',\n 'tplRenderFn',\n 'resultsPage',\n 'changeEvent',\n 'facets',\n 'isLoading',\n]);\n"]}
1	+ {"version":3,"file":"algolia-results.js","sourceRoot":"","sources":["../../../../src/components/algolia/algolia-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Watch,\n State,\n Build,\n EventEmitter,\n Event,\n Prop,\n readTask,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { Wormhole, SearchChangeEvent } from './algolia-data';\nimport type {\n IndexResult,\n AlgoliaResultHit,\n PageChangeEventDetail,\n AlgoliaFacet,\n} from './algolia-interface';\n\n/*\n Displays and syncs results from Algolia searches.\n * Must be nested within an nano-algolia component.\n * @slot start-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot start-output - A placeholder for template output.\n * @slot result-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot result-output - A placeholder for template output.\n * @slot end-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot end-output - A placeholder for template output.\n /\n@Component({\n tag: 'nano-algolia-results',\n shadow: true,\n})\nexport class AlgoliaResults {\n @Element() el: HTMLNanoAlgoliaResultsElement;\n\n private resultTpl: string;\n private resultTplSlot: HTMLElement;\n private startTpl: string;\n private startTplSlot: HTMLElement;\n private endTpl: string;\n private endTplSlot: HTMLElement;\n private outputSlot: HTMLElement;\n private outputEle: HTMLDivElement;\n private outputTo: HTMLElement;\n private startOutputSlot: HTMLElement;\n private endOutputSlot: HTMLElement;\n\n private io?: IntersectionObserver;\n private infiniteScrollBar: HTMLDivElement;\n private append: boolean = false;\n private shouldClear: boolean = true;\n private currHitNum: number = 0;\n\n @State() showResults: boolean = false;\n @State() tplRenderFn: (...args: any[]) => any;\n @State() results: AlgoliaResultHit[] = null;\n @State() indexResults: IndexResult = null;\n @State() resultsPage: number = 0;\n @State() changeEvent: SearchChangeEvent = SearchChangeEvent.Init;\n @State() facets: AlgoliaFacet;\n @State() isLoading: boolean = true;\n\n /\n Load and append pages automatically on scroll\n /\n @Prop() infiniteScroll: boolean = false;\n\n /\n Whether new pages loaded by pagination will replace or be appended to the results block\n * (this will be ignored if 'infiniteScroll' is set to true)\n /\n @Prop() appendPages: boolean = false;\n\n /\n Emitted when the page number changes\n /\n @Event() nanoPageChanged!: EventEmitter<PageChangeEventDetail>;\n\n /\n Emitted when templates are updated\n */\n @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaResultsElement>;\n\n // For append / infinite-scroll it's useful to have a universal index on render\n @Watch('results')\n addContentIndex() {\n this.shouldPageClear();\n if (this.shouldClear \|\| this.resultsPage === 0) this.currHitNum = 0;\n if (this.indexResults && this.indexResults.results) {\n this.indexResults.results.map((res) => {\n (res as any)._uIndex = this.currHitNum++;\n });\n }\n }\n\n // Update content template and perhaps add IO for infinite scrolling\n @Watch('results')\n @Watch('tplRenderFn')\n resultsChange() {\n this.shouldPageClear();\n // console.log('going to do update', this.resultsPage, this.results.length);\n this.updateResultContent();\n this.infiniteScrollChange();\n }\n\n // We have a foot / head slot template.\n // Can be useful to display current filter / search meta\n @Watch('facets')\n headerFooterChange() {\n this.updateStartEndContent();\n }\n\n @Watch('appendPages')\n appendChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n }\n\n @Watch('infiniteScroll')\n infiniteScrollChange() {\n this.append = this.infiniteScroll ? true : this.appendPages;\n if (this.infiniteScroll) this.attachIO();\n else this.detachIO();\n }\n\n @Watch('resultsPage')\n handlePageChage() {\n if (this.infiniteScroll) this.attachIO();\n else this.detachIO();\n }\n\n @Watch('isLoading')\n handleLoading() {\n if (!this.isLoading) this.infiniteScrollChange();\n }\n\n // Decide whether incoming content should clear or not.\n // if incoming change event is from a pagechange AND the current page is 0 OR appendPages option set...\n // Then leave up to the current, set append behaviour. Other clear it all out.\n private shouldPageClear() {\n this.shouldClear =\n this.changeEvent === SearchChangeEvent.Page ? !this.append : true;\n }\n\n // Called by IO. Emits page change event to parent which then iterated the global page count.\n private nextPage() {\n this.shouldClear = !this.append;\n this.nanoPageChanged.emit({ page: this.resultsPage + 1 });\n }\n\n private attachIO() {\n if (\n !this.infiniteScrollBar \|\|\n !this.infiniteScroll \|\|\n this.io \|\|\n !Build.isBrowser \|\|\n typeof window === 'undefined' \|\|\n !(window as any).IntersectionObserver\n )\n return;\n\n this.io = new (window as any).IntersectionObserver(\n async (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n this.nextPage();\n this.detachIO();\n }\n },\n { document, rootMargin: '100px', threshold: 1 }\n );\n this.io.observe(this.infiniteScrollBar);\n }\n\n private detachIO() {\n if (this.io) {\n this.io.disconnect();\n this.io = null;\n }\n }\n\n private updateStartEndContent() {\n // clear start slot if present\n if (this.startTpl && this.startOutputSlot) {\n this.startOutputSlot.innerHTML = this.tplRenderFn(\n this.startTpl,\n this.indexResults\n );\n }\n // clear end slot if present\n if (this.endOutputSlot && this.endTpl) {\n this.endOutputSlot.innerHTML = this.tplRenderFn(\n this.endTpl,\n this.indexResults\n );\n }\n this.nanoTplUpdated.emit(this.el);\n }\n\n private updateResultContent() {\n this.outputTo = this.outputSlot \|\| this.outputEle;\n\n if (!this.resultTpl \|\| !this.indexResults) return;\n\n // after filtering or new index - clear all content.\n // after pagination when the 'appendPages' set to true - don't clear results content\n if (this.shouldClear) this.outputTo.innerHTML = '';\n\n if (!this.tplRenderFn) return;\n\n const div = document.createElement('div');\n div.innerHTML = this.tplRenderFn(this.resultTpl, this.indexResults);\n\n Array.from(div.children).forEach((child) => {\n this.outputTo.appendChild(child);\n });\n\n this.shouldClear = true;\n this.nanoTplUpdated.emit(this.el);\n }\n\n connectedCallback() {\n readTask(() => {\n this.startTplSlot = this.el.querySelector('[slot=\"start-template\"]');\n this.startOutputSlot = this.el.querySelector('[slot=\"start-output\"]');\n if (this.startTplSlot) {\n this.startTpl = this.startTplSlot.innerHTML;\n this.startTpl = this.startTpl.replace(/=>/gm, '=>');\n }\n\n this.resultTplSlot = this.el.querySelector('[slot=\"result-template\"]');\n this.outputSlot = this.el.querySelector('[slot=\"result-output\"]');\n if (this.resultTplSlot) {\n this.resultTpl = this.resultTplSlot.innerHTML;\n this.resultTpl = this.resultTpl.replace(/=>/gm, '=>');\n }\n\n this.endTplSlot = this.el.querySelector('[slot=\"end-template\"]');\n this.endOutputSlot = this.el.querySelector('[slot=\"end-output\"]');\n if (this.endTplSlot) {\n this.endTpl = this.endTplSlot.innerHTML;\n this.endTpl = this.endTpl.replace(/=>/gm, '=>');\n }\n if (this.indexResults) {\n this.addContentIndex();\n this.updateResultContent();\n }\n });\n }\n\n componentDidLoad() {\n this.updateStartEndContent();\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'show-results': this.showResults,\n 'nano-results': true,\n }}\n >\n <div class=\"default\">\n <slot />\n </div>\n <div ref={(div) => (this.outputEle = div)}>\n <slot name=\"start-output\" />\n <slot name=\"result-output\" />\n <div ref={(div) => (this.infiniteScrollBar = div)}></div>\n <slot name=\"end-output\" />\n </div>\n </Host>\n );\n }\n}\n\nWormhole(AlgoliaResults, [\n 'indexResults',\n 'results',\n 'tplRenderFn',\n 'resultsPage',\n 'changeEvent',\n 'facets',\n 'isLoading',\n]);\n"]}

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

@@ -1,12 +1,13 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, Host, Build, writeTask, readTask, } from "@stencil/core";
+import { Host, Build, writeTask, readTask, } from "@stencil/core";
 import algoliasearch from "algoliasearch/dist/algoliasearch-lite.esm.browser";
 import { getDirectChildren } from "../../utils/dom";
 import { PromiseQueue } from "../../utils/promise-queue";
 import { ComponentStore, } from "../../utils/store/component-store";
 import { debounce } from "../../utils/throttle";
+import { transformTag, h } from "../../utils/renderer";
 import { Squirrel } from "./lib/template";
 import { Universe, SearchChangeEvent } from "./algolia-data";
 /**
@@ -186,7 +187,7 @@ export class Algolia {
     // a child nano-algolia-... updated their template
     onAllTplUpdate(ev) {
         ev.stopPropagation();
-        if (ev.target.tagName === 'NANO-ALGOLIA-RESULTS') {
+        if (ev.target.tagName.toLowerCase() === transformTag('nano-algolia-results')) {
             requestAnimationFrame(() => {
                 this.nanoNewResults.emit(this.indexResults);
             });
@@ -591,7 +592,7 @@ export class Algolia {
         this.placedAlgoliaEles = [];
         // take out children algolia elements 'cos they have their own templates
         // don't want to swap in their templates
-        Array.from(tmpCont.querySelectorAll('nano-algolia, nano-algolia-filter, nano-algolia-results')).forEach((el, i) => {
+        Array.from(tmpCont.querySelectorAll(`${transformTag('nano-algolia')}, ${transformTag('nano-algolia-filter')}, ${transformTag('nano-algolia-results')}`)).forEach((el, i) => {
             const placeholder = document.createElement('div');
             placeholder.dataset.placeholderId = i.toString();
             placeholder.classList.add('nano-ele-placeholder');
@@ -634,12 +635,13 @@ export class Algolia {
                 this.tpl = this.tplSlot.innerHTML || this.tplSlot.innerText;
             // get input field to listen to
             if (this.slottedInput &&
-                (this.slottedInput.tagName.toLocaleLowerCase() === 'nano-input' ||
+                (this.slottedInput.tagName.toLocaleLowerCase() ===
+                    transformTag('nano-input') ||
                     this.slottedInput instanceof HTMLInputElement)) {
                 this.inputField = this.slottedInput;
             }
             else if (this.slottedInput) {
-                this.inputField = this.slottedInput.querySelector('nano-input, input:not([type="radio"]):not([type="checkbox"])');
+                this.inputField = this.slottedInput.querySelector(`${transformTag('nano-input')}, input:not([type="radio"]):not([type="checkbox"])`);
             }
             else
                 this.handleListenToChange();
@@ -682,13 +684,14 @@ export class Algolia {
             globalStoreMethod: this.storeMethod,
             isLoading: this.isLoading,
         };
-        return (h(Host, { key: '9e96beac280ce103622504b8186522285c369fca', class: {
+        return (h(Host, { key: 'f0ae1895d779c2a59dd459fbc7cde8780b1ac9f8', class: {
                 'show-results': this.showResults,
                 'is-loading': this.isLoading,
-            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (h("div", { key: 'fb200e94b822d8072adc37c14e94c42ee69028dc', hidden: !this.isLoading }, h("slot", { key: '45f7f92069bb492ae8dd787b3e83426b7f9c1a67', name: "loader" }))), !this.hasLoadSlot && (h("div", { key: '5a66a1a9c6dbc2965a67e83a807257fcc348ba07', class: {
+                'nano-algolia': true,
+            }, "aria-busy": this.isLoading }, this.hasLoadSlot && (h("div", { key: '15e48727d32a3afa360fec13edb8aca3d211737c', hidden: !this.isLoading }, h("slot", { key: 'a5ec5e6a5ec997540d2dd60fd95a8c82c0c506c2', name: "loader" }))), !this.hasLoadSlot && (h("div", { key: '96275ed0b3486691bc9f5154f5f115cd09274990', class: {
                 loader: true,
                 loading: this.isLoading,
-            } }, h("nano-spinner", { key: 'e75ce7f85cbf9f2fa016361180eff76b8c96e6c3', overlay: true, type: "circle" }))), h(Universe.Provider, { key: 'ecd4ca9daa783e552fc3d3443f788fabb4ace134', state: wormholeState }, h("slot", { key: 'db8aef0eae72cfc5613d7036becc1595339fe21e', name: "search-input" }), h("div", { key: '0fe521a17f50dd75287d43cf7a379097d3c6b1e9', class: "results-container", "aria-live": "polite" }, h("div", { key: '626bee023688d6ca0681112745df27a7e30d6897', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '291df11fc50a7ea922d81996b3030821e48e3c35', name: "output" })))), h("div", { key: 'dfa8adf214d0a2b7654e762000903ab139893e96', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: 'f21a7068987d669a1ee910b1ea8a1d3a48ace767' }))));
+            } }, h("nano-spinner", { key: 'd2b86328009cfdb943c5d702e55e9c51ae569f9d', overlay: true, type: "circle" }))), h(Universe.Provider, { key: 'e3465b7980720e2be4d481b7e71a7a033fe52ae1', state: wormholeState }, h("slot", { key: '161554c21e77aa7e662491e787c69d402d00035f', name: "search-input" }), h("div", { key: '4f1c30d75e84a609fc621afce96233bfd678518f', class: "results-container", "aria-live": "polite" }, h("div", { key: '1bce8a2a0c2cd7f71f64750f7c18ff63aefeadd1', ref: (div) => (this.resultsDiv = div), class: "results" }, h("slot", { key: '70582027504c1d2cba99f80e99d51d711247d0ab', name: "output" })))), h("div", { key: 'd4fcea375a1c86191135ba43f85e66e93b076d63', ref: (div) => (this.defaultDiv = div), class: "default", tabindex: "-1" }, h("slot", { key: '7e291158dfbcb83181bb91e0506eb0a1b6cfb13b' }))));
     }
     static get is() { return "nano-algolia"; }
     static get encapsulation() { return "shadow"; }