@nanoporetech-digital/components 7.8.0 → 7.9.1
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.
- package/dist/cjs/app-globals-3e14cb71.js.map +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +8 -4
- package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon-button_2.cjs.entry.js +5 -5
- package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-43fc3d23.js → nano-table-54523fe5.js} +2 -2
- package/dist/cjs/{nano-table-43fc3d23.js.map → nano-table-54523fe5.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-ad250672.js → table.worker-99f69a43.js} +2 -2
- package/dist/cjs/table.worker-99f69a43.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.js +8 -4
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/collection/components/icon/icon.js +3 -2
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.js +2 -1
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/components/icon-button.js +2 -1
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/icon.js.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/nano-checkbox.js +8 -4
- package/dist/components/nano-checkbox.js.map +1 -1
- package/dist/esm/app-globals-f0120bbe.js.map +1 -1
- package/dist/esm/nano-checkbox.entry.js +8 -4
- package/dist/esm/nano-checkbox.entry.js.map +1 -1
- package/dist/esm/nano-icon-button_2.entry.js +4 -4
- package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
- package/dist/esm/nano-icon.entry.js +1 -1
- package/dist/esm/nano-icon.entry.js.map +1 -1
- package/dist/esm/{nano-table-4481d4e1.js → nano-table-3965ddd0.js} +2 -2
- package/dist/esm/{nano-table-4481d4e1.js.map → nano-table-3965ddd0.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-1bc9c170.js → table.worker-8e04f768.js} +2 -2
- package/dist/esm/table.worker-8e04f768.js.map +1 -0
- package/dist/nano-components/app-globals-f0120bbe.js.map +1 -1
- package/dist/nano-components/nano-checkbox.entry.js +1 -1
- package/dist/nano-components/nano-checkbox.entry.js.map +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js.map +1 -1
- package/dist/nano-components/nano-icon.entry.js +1 -1
- package/dist/nano-components/nano-icon.entry.js.map +1 -1
- package/dist/nano-components/{nano-table-4481d4e1.js → nano-table-3965ddd0.js} +2 -2
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/table.worker-8e04f768.js +5 -0
- package/dist/types/components/icon/icon.d.ts +2 -1
- package/dist/types/components.d.ts +8 -4
- package/docs-json.json +2 -2
- package/docs-vscode.json +1 -1
- package/hydrate/index.js +15 -10
- package/hydrate/index.mjs +15 -10
- package/package.json +1 -1
- package/dist/cjs/table.worker-ad250672.js.map +0 -1
- package/dist/esm/table.worker-1bc9c170.js.map +0 -1
- package/dist/nano-components/table.worker-1bc9c170.js +0 -5
- /package/dist/nano-components/{nano-table-4481d4e1.js.map → nano-table-3965ddd0.js.map} +0 -0
- /package/dist/nano-components/{table.worker-1bc9c170.js.map → table.worker-8e04f768.js.map} +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/custom-element-doc-generator.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/index.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/output-vue.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/plugin.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/types.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/utils.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","NanoIconStyle0","Icon","io","isVisible","isLoading","color","role","ariaLabel","flipRtl","size","lazy","udpateRole","this","setAriaLabel","el","label","split","slice","undefined","connectedCallback","waitUntilVisible","loadIcon","disconnectedCallback","disconnect","componentWillLoad","rootMargin","cb","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isRtl","ownerDocument","dir","closest","rootNode","getRootNode","ownerHost","host","render","h","Host","key","class","createColorClasses","loading"],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","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"],"mappings":"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","ignoreList":[]}
|
1
|
+
{"version":3,"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","then","rsp","ok","text","set","iconCss","NanoIconStyle0","Icon","io","isVisible","isLoading","color","role","ariaLabel","flipRtl","size","lazy","udpateRole","this","setAriaLabel","el","label","split","slice","undefined","connectedCallback","waitUntilVisible","loadIcon","disconnectedCallback","disconnect","componentWillLoad","rootMargin","cb","IntersectionObserver","data","isIntersecting","observe","has","requestAnimationFrame","isRtl","ownerDocument","dir","closest","rootNode","getRootNode","ownerHost","host","render","h","Host","key","class","createColorClasses","loading"],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","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).\n * 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"],"mappings":"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","ignoreList":[]}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
import{k as t,h as n,F as e,g as o,f as i,d as s,e as r,r as a,c as l,a as c}from"./index-6cc72cd9.js";import{h as d}from"./renderer-4bc3e2dc.js";import{a as h}from"./math-d160f8a6.js";import{d as b}from"./throttle-df960210.js";import{f}from"./scroll-parent-be39fbd0.js";import{c as p}from"./index-f5f7b950.js";const _="nano-tbl";const u=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const m=t=>{if(t!=null){if(u(t,"ArrayBuffer")||u(t,"MessagePort")||u(t,"ImageBitmap")||u(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(m)}return m(t.buffer)}}return[]};let g=0;let y=0;const w=new Map;const v=new Map;const k=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const s=n[2];if(e===o){const e=n[3];const[o,r,a]=w.get(i);w.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}o(s)}}else if(e===o+".cb"){try{v.get(i)(...s)}catch(n){t(n)}}}}));return i};const x=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let r=g++;let a=0;let l=o.length;let c=[i,s];w.set(r,c);for(;a<l;a++){if(typeof o[a]==="function"){const t=y++;v.set(t,o[a]);o[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const d=t=>t.postMessage([n,r,e,o],m(o));if(t.then){t.then(d)}else{d(t)}}));const $=import("./table.worker-1bc9c170.js").then((t=>t.worker));const z=x($,"stencil.table.worker","createWorkerStore");const C=x($,"stencil.table.worker","syncConfigToWorker");const S=x($,"stencil.table.worker","syncDataToWorker");const R=x($,"stencil.table.worker","workerFilter");const T=x($,"stencil.table.worker","workerSearch");const I=x($,"stencil.table.worker","workerSort");function B(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(t?.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const P=new WeakMap;async function A(t,n,e,o){const i={data:p({rows:[]}),config:p({columns:n}),general:p({workerId:null,scrollParent:e,host:t,isReady:o})};const s=await z(i.data.state.rows,B(i.config.state.columns));i.general.state.workerId=s;P.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)}});return i}function F(t){return P.get(t)}function E(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=o.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=E(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const e=new Date(t[n]);if(!!e&&Number(e))t[n]=Number(e)}));t["__index"]=n;t["__uuid"]=h(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return S(e.general.state.workerId,n)}function D(t,n){const e=P.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return C(e.general.state.workerId,B(n))}async function N(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await T(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function j(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await R(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function H(t,n,e){const o=P.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await I(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function O(t,n){const e=Y();const o=e.config.state.columns;const i=e.data.state.rows;const s=o[n];const r=s?.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=Y();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function L(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"&&typeof n.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function Y(){return F(o(i()))}function J(t,n,e){const o={...e};const i=Y().config.state.columns[n]?.cellProperties;if(!i)return o;const s=O(t,n);const r=i(s);if(!r)return o;return L(o,r)}function K(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function X(t,n,e=false){const o={[`${_}__${t}`]:true,[`${_}__pin`]:!!n,[`${_}__pin--top`]:n==="top",[`${_}__pin--bottom`]:n==="bottom"};if(e)return q(o);return o}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function U(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const G=({column:t,onColumnSortClick:n,defaults:o})=>{function i(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}function s(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let r={};if(t.columnProperties){r=t.columnProperties(t)||r}const a={class:{...X("th",t.pinned),[`${_}__pin--start`]:t.pinned==="start",[`${_}__pin--end`]:t.pinned==="end",[`${_}__ordered`]:!!t.order,[`${_}__filtered`]:t.filter!==undefined&&t.filter!==null}};let l=r?L(a,r):a;const c=K(t);if(!c)return d(e,null);l=Number(l.colSpan)>1?{...l,scope:"colgroup"}:{...l,scope:"col"};if(s()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";l={...l,"aria-sort":n}}return d("th",{...l,key:t.prop},s()?d("button",{class:{[`${_}__order-btn`]:true,[`${_}__cell-content`]:true},onClick:i},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?d("nano-icon",{name:"solid/arrow-down-long"}):d("nano-icon",{name:"solid/arrow-up-long"})),d("div",{class:`${_}__status-icons`},d("nano-icon",{name:"light/chevron-down"}))):d("div",{class:`${_}__cell-content`},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/bars-filter"})))};function Q(t,n){const o=Y();const s=o.config.state.columns;const r=s[n]?.cellTemplate;const a=O(t,n);const l=i();if(!!a.cellModel&&s[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!r?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}let c=false;const h=(...t)=>{c=true;return d(...t)};let b=r?r(h,a):undefined;if(b&&l.customRenderer&&b["t"]===undefined&&!(b instanceof Element)&&typeof b!=="string"&&!c){const t=document.createElement("template");const n=l.customRenderer(b,t.content);b=n&&n["then"]?n:t}return b?b:a.cellModel!==undefined&&a.cellModel!==null?d(e,null,a.cellModel?.toString()):""}const V=(t,n=false)=>{const e=Y();const o=e.config.state.columns[t];const i={[`${_}__td`]:true,[`${_}__ordered`]:!!o.order,[`${_}__pin`]:!!o.pinned,[`${_}__pin--start`]:o.pinned==="start",[`${_}__pin--end`]:o.pinned==="end"};if(n)return q(i);return i};const Z=({rowIndex:t,colIndex:n,nestedContent:e})=>{const o=()=>e?e():Q(t,n)||d("span",{class:"placeholder"}," ");let s="td";const r=i();const a=Y();const l=a.config.state.columns[n];let c=J(t,n,{class:V(n)});if(l.rowHeader){c=Number(c.rowSpan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};s="th"}const h=t=>{const n=o();return d("div",{ref:t=>{if(!t)return;if(n instanceof Element){t.replaceChildren();t.append(n["content"]||n)}else if(n["then"]){n.then((n=>t.innerHTML=n))}},...t,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:!!l.wrap},innerHTML:typeof n==="string"&&n.includes("<")?n:undefined},(typeof n!=="string"||!n.includes("<"))&&!n["then"]&&!(n instanceof Element)&&n)};return d(s,{role:r.type==="grid"?"gridcell":undefined,...c},l.autoTooltip&&!l.wrap?d("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},d("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(s).style.zIndex="100",onNanoHide:t=>t.target.closest(s).style.zIndex=""},d(h,null),d("span",{slot:"content"},d(o,null)))):d(h,null))};const tt=(t,n,e)=>{const o=d("div",{...t.wrapperProps,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:t.wrap}},n);return t.header?d("th",{scope:e,...t.cellProps},o):d("td",{...t.cellProps},o)};const nt=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let r={};if(!e){const t=W(n);e=t.rowModel}if(t?.rowProperties){r=t.rowProperties({rowModel:e,rowIndex:n})||r}let a;if(t?.pinned&&typeof t.pinned==="function"){a=t.pinned({rowModel:e,rowIndex:n})}const l=L({class:X("tr",a,true)},r);const c=t?.template;const h=t=>i.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:V(n,true)},t.vattrs)}return t}));if(c){let t=c(d,{renderedRow:d("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);if(Array.isArray(t)){t=i.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=L({class:X("tr",a,true)},t.vattrs);if(t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return d("tr",{...l,key:e.__uuid},h(o))};const et=({rowRenderer:t},n,e)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col");const s=t.pinned||null;const r={class:X("tr",s)};const a=o?L(r,o):r;const l=t?.template;if(l){let t=l(d,{renderedRow:d("tr",{...a},n)},i);if(Array.isArray(t)){t=e.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=L({class:X("tr",s,true)},t.vattrs);if(t.vchildren){t.vchildren=e.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:X(t.vtag.toString(),s,true)},t.vattrs)}return t}))}}return t}))}return t}return d("tr",{...a},n)};function ot(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--end`);this.topRows=t.getElementsByClassName(`${_}__pin--top`);this.bottomRows=t.getElementsByClassName(`${_}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}_pinnedStart=[];handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${_}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);ot(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--start`);ot(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${_}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);ot(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--end`);ot(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const o=Array.from(this.endColumns).reverse();const i=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${o.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;ot(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let o=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;o=this.scrollElement.offsetTop}return{offsetX:e,offsetY:o}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-top");const c=l!==""?parseFloat(l):t;s((()=>{if(i-e<=c){o.classList.add(`${_}__pinned`,`${_}__pinned--top`)}else{o.classList.remove(`${_}__pinned`,`${_}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}}))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-bottom");const c=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+o-(t+r)<=c){i.classList.add(`${_}__pinned`,`${_}__pinned--bottom`)}else{i.classList.remove(`${_}__pinned`,`${_}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const o=new Promise((o=>{if(this.startColumns.length){r((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedStart.find((t=>t===o));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,o]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==o))}s+=t.width}if(!this.endColumns.length)o()}))}if(this.endColumns.length){r((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const o of i){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedEnd.find((t=>t===o));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[o,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))}r+=t.width}o()}))}}));await o;this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const st=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}';const rt=st;const at=false;function lt(t,n=false){if(!performance||!at)return;if(n){performance?.mark("end"+t);performance?.measure(t,"start"+t,"end"+t);const n=performance?.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance?.mark("start"+t)}}let ct=0;const dt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;type="table";caption;showCaption=false;loading=undefined;get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=true;placeholderSize=5;rows;handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}columns=[];async handleColsChange(){await D(this.host,this.columns);if(this.isReady)this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=false;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=true;handleSearchTermChange(){this.searchStart()}virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+ct++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;tableWrapperEle;activeWatcherIo;tablePinnedService;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}_isReady=false;handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;lt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await H(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return{...e,order:t};return{...e,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t});lt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;lt("search");this.scrollToTop();try{await N(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});lt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;lt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){await this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));await j(this.host,this.filters);this.nanoTblAfterFilter.emit({filters:this.filters});lt("filter",true)}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!U(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!U(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${_}__inactive`)));t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;lt("blockDims");const t=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const n=new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{if(await t()){n();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}))}));n.then((()=>{lt("blockDims",true);lt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}lt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())})}this.blocks=i;lt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${_}__inactive`))return;const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;lt("scrollHandler");if(!this.store?.general.state.isActive||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{t=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;t+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:t})}let n=this.host.offsetTop;let e=0;const o=this.blocks.length;while(e<o&&t>=n){n+=this.getBlockHeight(e);if(t<n){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}lt("scrollHandler",true)}))};processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}handleResizeChange=t=>{this.tableWrapperEle.className="";let n=[`${_}__wrap`];if(t.target?.className)n=[...t.target.className.split(" "),...n];this.tableWrapperEle.classList.add(...n.filter((t=>!!t)))};setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){lt("init");this.store=await A(this.host,this.columns,this.scrollParent,this.isReady);this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=f(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=f(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){lt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));lt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return d(c,{key:"7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa",class:"nano-table"},d("div",{key:"acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9",class:`${_}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),d("nano-resize-observe",{key:"9a38da33f0cfb64329331510f196ef7c42e51ca3",states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),d("div",{key:"25aad643f108a5e48319a20a70a36066eb099d5d",class:`${_}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},d("nano-progress-bar",{key:"519fc388c4926af6bd9dfaba2112fa2db1dbc3cd",indeterminate:true,class:{[`${_}__progress-bar`]:true,[`${_}__progress-bar--show`]:this._loading}}),d("table",{key:"b58a665666893b4b15aad6ab7e7a08bd20527cb2",role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${_}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},d("caption",{key:"5bc653ff3a487546e652cd787996dfde662fdf67",class:{[`${_}__caption`]:true,[`${_}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},d("slot",{key:"a6c855db5a74c123d08ad4e65954f17573c9ea3a",name:"caption"},this.caption)),d("thead",{key:"743820b2abc85adac1fe4babf918be10a8e62a26"},d(et,{key:"e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036",rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&d("tbody",{key:"6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa",class:`${_}__active ${_}__loading`},[...Array(10).keys()].map((t=>d("tr",null,this.store.config.state.columns.map(((n,e)=>d(Z,{rowIndex:t,colIndex:e,nestedContent:()=>d("nano-skeleton",null)}))))))),d("tr",{key:"092f27f8726f12b7fa10d166b560d6df6593bbc1",hidden:!!this._loading||!!this.blocks.length},d("th",{key:"edfbca925f99550897c3b460a6efcb326863a591",class:`${_}__th`,colSpan:this.store.config.state.columns.length},d("div",{key:"5d4b996c3141b6583317a2b28357fe7af3a873bc",class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},d("slot",{key:"00db3e5649ccdc97062881ff7b3801fb1847c2db",name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>d("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${_}__inactive`]:!this.activeBlocks.includes(n),[`${_}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return d(nt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>d(Z,{rowIndex:o,colIndex:n}))))})):d("tr",{class:`${_}__tr--placeholder`},d("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&d("tfoot",{key:"15a1a79049ad87f63c87e2d905bc401a7d4bbb60"},d(et,{key:"ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea",rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&d("nano-spinner",{key:"dd0041a5232a79a9f1882d2b9e5beebd79587a5d",type:"circle",class:{[`${_}__spinner`]:true,[`${_}__spinner--show`]:this._loading}})))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};dt.style=rt;export{dt as T,k as c};
|
5
|
-
//# sourceMappingURL=nano-table-
|
4
|
+
import{k as t,h as n,F as e,g as o,f as i,d as s,e as r,r as a,c as l,a as c}from"./index-6cc72cd9.js";import{h as d}from"./renderer-4bc3e2dc.js";import{a as h}from"./math-d160f8a6.js";import{d as b}from"./throttle-df960210.js";import{f}from"./scroll-parent-be39fbd0.js";import{c as p}from"./index-f5f7b950.js";const _="nano-tbl";const u=(t,n)=>{const e=globalThis[n];return e!=null&&t instanceof e};const m=t=>{if(t!=null){if(u(t,"ArrayBuffer")||u(t,"MessagePort")||u(t,"ImageBitmap")||u(t,"OffscreenCanvas")){return[t]}if(typeof t==="object"){if(t.constructor===Object){t=Object.values(t)}if(Array.isArray(t)){return t.flatMap(m)}return m(t.buffer)}}return[]};let g=0;let y=0;const w=new Map;const v=new Map;const k=(n,e,o)=>{const i=new Worker(n,{name:e});i.addEventListener("message",(({data:n})=>{if(n){const e=n[0];const i=n[1];const s=n[2];if(e===o){const e=n[3];const[o,r,a]=w.get(i);w.delete(i);if(e){const n=e.isError?Object.assign(new Error(e.value.message),e.value):e.value;t(n);r(n)}else{if(a){a.forEach((t=>v.delete(t)))}o(s)}}else if(e===o+".cb"){try{v.get(i)(...s)}catch(n){t(n)}}}}));return i};const x=(t,n,e)=>(...o)=>new Promise(((i,s)=>{let r=g++;let a=0;let l=o.length;let c=[i,s];w.set(r,c);for(;a<l;a++){if(typeof o[a]==="function"){const t=y++;v.set(t,o[a]);o[a]=[n+".cb",t];(c[2]=c[2]||[]).push(t)}}const d=t=>t.postMessage([n,r,e,o],m(o));if(t.then){t.then(d)}else{d(t)}}));const $=import("./table.worker-8e04f768.js").then((t=>t.worker));const z=x($,"stencil.table.worker","createWorkerStore");const C=x($,"stencil.table.worker","syncConfigToWorker");const S=x($,"stencil.table.worker","syncDataToWorker");const R=x($,"stencil.table.worker","workerFilter");const T=x($,"stencil.table.worker","workerSearch");const I=x($,"stencil.table.worker","workerSort");function B(t){const n=JSON.parse(JSON.stringify(t));t.forEach((t=>{if(t?.sortCompareFn){const e=n.find((n=>n.prop===t.prop));e.sortCompareFn=t.sortCompareFn.toString()}}));return n}const P=new WeakMap;async function A(t,n,e,o){const i={data:p({rows:[]}),config:p({columns:n}),general:p({workerId:null,scrollParent:e,host:t,isReady:o})};const s=await z(i.data.state.rows,B(i.config.state.columns));i.general.state.workerId=s;P.set(t,i);i.data.use({reset:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)S(i.general.state.workerId,null)}});i.config.use({reset:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)},dispose:()=>{if(i.general.state.workerId)C(i.general.state.workerId,null)}});return i}function F(t){return P.get(t)}function E(t){if(t instanceof Date){return"date"}if(["number","string","boolean"].includes(typeof t)){return typeof t}return"unknown"}function M(t,n){const e=P.get(t);if(!e)return;const o=e.config.state.columns;const i=o.filter((t=>t.type==="date")).reduce(((t,n)=>[...t,n.prop]),[]);const s=o.filter((t=>!t.type));n=n.map(((t,n)=>{if(s.length&&n===0){e.config.state.columns=o.map((n=>{if(s.includes(n)&&t[n.prop]&&!n.type){n.type=E(t[n.prop]);if(n.type==="date")i.push(n.prop)}return n}))}i.forEach((n=>{const e=new Date(t[n]);if(!!e&&Number(e))t[n]=Number(e)}));t["__index"]=n;t["__uuid"]=h(o.map((n=>t[n.prop])).join());return t}));e.data.state.rows=n;if(e.general.state.workerId)return S(e.general.state.workerId,n)}function D(t,n){const e=P.get(t);if(!e)return;e.config.state.columns=n;if(e.general.state.workerId)return C(e.general.state.workerId,B(n))}async function N(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await T(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function j(t,n){const e=P.get(t);if(!e||!e.general.state.workerId)return;try{e.data.state.rows=await R(e.general.state.workerId,n)}catch(t){console.warn(t)}}async function H(t,n,e){const o=P.get(t);if(!o||!o.general.state.workerId)return;try{o.data.state.rows=await I(o.general.state.workerId,n,e)}catch(t){console.warn(t)}}function O(t,n){const e=Y();const o=e.config.state.columns;const i=e.data.state.rows;const s=o[n];const r=s?.prop;const a=i[t];const l=a?a[o[n].prop]:"";return{prop:r,cellModel:l,column:s,rowIndex:t,rowModel:a}}function W(t){const n=Y();const e=n.data.state.rows;const o=e[t];return{rowModel:o,rowIndex:t}}function L(t,n){if(!n)return t;const e={...n,...t};if(n.class){if(typeof n.class==="object"&&typeof e.class==="object"){e.class={...n.class,...e.class}}else if(typeof n.class==="string"&&typeof e.class==="object"){e.class[n.class]=true}else if(typeof e.class==="string"&&typeof n.class==="string"){e.class+=" "+n.class}}if(n.style){e.style={...n.style,...e.style}}return e}function Y(){return F(o(i()))}function J(t,n,e){const o={...e};const i=Y().config.state.columns[n]?.cellProperties;if(!i)return o;const s=O(t,n);const r=i(s);if(!r)return o;return L(o,r)}function K(t){const o=t?.columnTemplate;return o?o(n,t):n(e,null,t.title)}function X(t,n,e=false){const o={[`${_}__${t}`]:true,[`${_}__pin`]:!!n,[`${_}__pin--top`]:n==="top",[`${_}__pin--bottom`]:n==="bottom"};if(e)return q(o);return o}function q(t){let n="";Object.entries(t).forEach((([t,e])=>{if(e)n+=t+" "}));return n}function U(t,n=100){const e=t.getBoundingClientRect();const o=window.innerHeight||document.documentElement.clientHeight;if(!e.bottom&&!e.top&&!e.left&&!e.right&&!e.height&&!e.width&&!e.x&&!e.y)return false;return!(Math.floor(100-(e.top>=0?0:e.top)/+-e.height*100)<n||Math.floor(100-(e.bottom-o)/e.height*100)<n)}const G=({column:t,onColumnSortClick:n,defaults:o})=>{function i(e){let o;switch(t.order){case"asc":o="desc";break;case"desc":o=null;break;default:o="asc"}n(o,t.prop,e.target.closest("th"))}function s(){return!!o.sortable&&t.sortable!==false||!o.sortable&&t.sortable===true}let r={};if(t.columnProperties){r=t.columnProperties(t)||r}const a={class:{...X("th",t.pinned),[`${_}__pin--start`]:t.pinned==="start",[`${_}__pin--end`]:t.pinned==="end",[`${_}__ordered`]:!!t.order,[`${_}__filtered`]:t.filter!==undefined&&t.filter!==null}};let l=r?L(a,r):a;const c=K(t);if(!c)return d(e,null);l=Number(l.colSpan)>1?{...l,scope:"colgroup"}:{...l,scope:"col"};if(s()){const n=t.order?t.order==="asc"?"ascending":"descending":"none";l={...l,"aria-sort":n}}return d("th",{...l,key:t.prop},s()?d("button",{class:{[`${_}__order-btn`]:true,[`${_}__cell-content`]:true},onClick:i},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/filter"}),!!t.order&&(t.order==="desc"?d("nano-icon",{name:"solid/arrow-down-long"}):d("nano-icon",{name:"solid/arrow-up-long"})),d("div",{class:`${_}__status-icons`},d("nano-icon",{name:"light/chevron-down"}))):d("div",{class:`${_}__cell-content`},K(t),t.filter!==undefined&&t.filter!==null&&d("nano-icon",{name:"light/bars-filter"})))};function Q(t,n){const o=Y();const s=o.config.state.columns;const r=s[n]?.cellTemplate;const a=O(t,n);const l=i();if(!!a.cellModel&&s[n].type==="date"){const t=new Date(a.cellModel);if(t instanceof Date&&!isNaN(t)){a.cellModel=!r?`${new Date(a.cellModel).toLocaleDateString()} ${new Date(a.cellModel).toLocaleTimeString()}`:t}}let c=false;const h=(...t)=>{c=true;return d(...t)};let b=r?r(h,a):undefined;if(b&&l.customRenderer&&b["t"]===undefined&&!(b instanceof Element)&&typeof b!=="string"&&!c){const t=document.createElement("template");const n=l.customRenderer(b,t.content);b=n&&n["then"]?n:t}return b?b:a.cellModel!==undefined&&a.cellModel!==null?d(e,null,a.cellModel?.toString()):""}const V=(t,n=false)=>{const e=Y();const o=e.config.state.columns[t];const i={[`${_}__td`]:true,[`${_}__ordered`]:!!o.order,[`${_}__pin`]:!!o.pinned,[`${_}__pin--start`]:o.pinned==="start",[`${_}__pin--end`]:o.pinned==="end"};if(n)return q(i);return i};const Z=({rowIndex:t,colIndex:n,nestedContent:e})=>{const o=()=>e?e():Q(t,n)||d("span",{class:"placeholder"}," ");let s="td";const r=i();const a=Y();const l=a.config.state.columns[n];let c=J(t,n,{class:V(n)});if(l.rowHeader){c=Number(c.rowSpan)>1?{...c,scope:"rowgroup"}:{...c,scope:"row"};s="th"}const h=t=>{const n=o();return d("div",{ref:t=>{if(!t)return;if(n instanceof Element){t.replaceChildren();t.append(n["content"]||n)}else if(n["then"]){n.then((n=>t.innerHTML=n))}},...t,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:!!l.wrap},innerHTML:typeof n==="string"&&n.includes("<")?n:undefined},(typeof n!=="string"||!n.includes("<"))&&!n["then"]&&!(n instanceof Element)&&n)};return d(s,{role:r.type==="grid"?"gridcell":undefined,...c},l.autoTooltip&&!l.wrap?d("nano-resize-observe",{notifyContentFit:"x",onNanoResizeContentFitChange:t=>t.target.firstElementChild.disabled=t.detail.x},d("nano-tooltip",{disabled:true,placement:"top",onNanoShow:t=>t.target.closest(s).style.zIndex="100",onNanoHide:t=>t.target.closest(s).style.zIndex=""},d(h,null),d("span",{slot:"content"},d(o,null)))):d(h,null))};const tt=(t,n,e)=>{const o=d("div",{...t.wrapperProps,class:{[`${_}__cell-content`]:true,[`${_}__cell-content--wrap`]:t.wrap}},n);return t.header?d("th",{scope:e,...t.cellProps},o):d("td",{...t.cellProps},o)};const nt=({rowRenderer:t,rowIndex:n,rowModel:e},o,i)=>{const s=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"row");let r={};if(!e){const t=W(n);e=t.rowModel}if(t?.rowProperties){r=t.rowProperties({rowModel:e,rowIndex:n})||r}let a;if(t?.pinned&&typeof t.pinned==="function"){a=t.pinned({rowModel:e,rowIndex:n})}const l=L({class:X("tr",a,true)},r);const c=t?.template;const h=t=>i.map(t,((t,n)=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:V(n,true)},t.vattrs)}return t}));if(c){let t=c(d,{renderedRow:d("tr",{...l,key:e.__uuid},o),rowModel:e,rowIndex:n},s);if(Array.isArray(t)){t=i.map(t,((t,n)=>{if(t.vtag==="tr"){if(!t.vkey)t.vkey=`${e.__uuid}_${n}`;t.vattrs=L({class:X("tr",a,true)},t.vattrs);if(t.vchildren){t.vchildren=h(t.vchildren)}}return t}))}return t}return d("tr",{...l,key:e.__uuid},h(o))};const et=({rowRenderer:t},n,e)=>{let o={};if(t.rowProperties){o=t.rowProperties()||{}}const i=({header:t,wrap:n,cellProps:e,wrapperProps:o},i)=>tt({header:t,wrap:n,cellProps:e,wrapperProps:o},i,"col");const s=t.pinned||null;const r={class:X("tr",s)};const a=o?L(r,o):r;const l=t?.template;if(l){let t=l(d,{renderedRow:d("tr",{...a},n)},i);if(Array.isArray(t)){t=e.map(t,(t=>{if(t.vtag==="tr"){t.vattrs=L({class:X("tr",s,true)},t.vattrs);if(t.vchildren){t.vchildren=e.map(t.vchildren,(t=>{if(["td","th"].includes(t.vtag.toString())){t.vattrs=L({class:X(t.vtag.toString(),s,true)},t.vattrs)}return t}))}}return t}))}return t}return d("tr",{...a},n)};function ot(t,n){const e=document.getElementById(t)||document.createElement("style");e.id=t;e.innerHTML=n;if(!e.isConnected)document.head.append(e)}class it{cachedColMeta=new WeakMap;tableId;tableEle;scrollElement;startColumns;endColumns;topRows;bottomRows;tableDims;constructor(t,n){this.tableEle=t;this.tableId=this.tableEle.id;this.scrollElement=n;this.startColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--start`);this.endColumns=t.querySelector("thead").getElementsByClassName(`${_}__pin--end`);this.topRows=t.getElementsByClassName(`${_}__pin--top`);this.bottomRows=t.getElementsByClassName(`${_}__pin--bottom`);this.onResize()}get pinnedStart(){return this._pinnedStart}set pinnedStart(t){this._pinnedStart=t;this.handlePinnedStartChange()}_pinnedStart=[];handlePinnedStartChange(){s((()=>{if(this.pinnedStart.length){this.tableEle.classList.add(`${_}__pinned--start`);const t=this.cachedColMeta.get(this.pinnedStart[this.pinnedStart.length-1]);ot(`${this.tableId}-col-start-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) {\n --pin-start-active: 1;\n }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--start`);ot(`${this.tableId}-col-start-active-style`,``)}}))}get pinnedEnd(){return this._pinnedEnd}set pinnedEnd(t){this._pinnedEnd=t;this.handlePinnedEndChange()}_pinnedEnd=[];handlePinnedEndChange(){s((()=>{if(this.pinnedEnd.length){this.tableEle.classList.add(`${_}__pinned--end`);const t=this.cachedColMeta.get(this.pinnedEnd[0]);ot(`${this.tableId}-col-end-active-style`,`\n #${this.tableId} tr > :nth-child(${t.idx+1}) { --pin-end-active: 1; }\n `)}else{this.tableEle.classList.remove(`${_}__pinned--end`);ot(`${this.tableId}-col-end-active-style`,``)}}))}get cssColDimensionCacheKey(){return this._cssColDimensionCacheKey}set cssColDimensionCacheKey(t){if(t===this._cssColDimensionCacheKey)return;this._cssColDimensionCacheKey=t;this.createPinnedColDimensionStyles()}_cssColDimensionCacheKey="";generateCssCacheKey(){let t="";for(const n of this.startColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}for(const n of this.endColumns){const e=this.cachedColMeta.get(n);t+=`${e.idx}-start-${e.width}`}this.cssColDimensionCacheKey=t}createPinnedColDimensionStyles(){let t=0;let n=0;const e=Array.from(this.startColumns);const o=Array.from(this.endColumns).reverse();const i=`\n ${e.map((n=>{const e=this.cachedColMeta.get(n);t+=e.width-1||-1;return`\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ td,\n #${this.tableId} tr > :nth-child(${e.idx+1}) ~ th {\n --pin-start: ${t-1}px;\n }\n `})).join("")}\n ${o.map((t=>{const e=this.cachedColMeta.get(t);n+=e.width-1||-1;return`\n #${this.tableId} tr > td:has(~ :nth-child(${e.idx+1})),\n #${this.tableId} tr > th:has(~ :nth-child(${e.idx+1})) {\n --pin-end: ${n-1}px;\n }\n `})).join("")}\n `;ot(`${this.tableId}-dimension-style`,i)}getParentOffsets(){const{x:t,y:n}=this.scrollElement.getBoundingClientRect();let e=t;let o=n;if(this.scrollElement===document.documentElement){e=this.scrollElement.offsetLeft;o=this.scrollElement.offsetTop}return{offsetX:e,offsetY:o}}assessRows(){if(!this.topRows.length&&!this.bottomRows.length)return;if(this.topRows.length){r((async()=>{let t=0;let n;const{offsetY:e}=this.getParentOffsets();for(const o of this.topRows){const{y:i,height:r}=o.getBoundingClientRect();const a=o.parentElement;const l=getComputedStyle(o).getPropertyValue("--pin-top");const c=l!==""?parseFloat(l):t;s((()=>{if(i-e<=c){o.classList.add(`${_}__pinned`,`${_}__pinned--top`)}else{o.classList.remove(`${_}__pinned`,`${_}__pinned--top`)}if(n!==a){a.style.setProperty("--pin-top",`${t-1}px`);t+=r-1;n=a}}))}}))}if(this.bottomRows.length){const t=Array.from(this.bottomRows).reverse();r((async()=>{let n;let e=0;const{offsetY:o}=this.getParentOffsets();for(const i of t){if(!i.isConnected)continue;const{y:t,height:r}=i.getBoundingClientRect();const a=i.parentElement;const l=getComputedStyle(i).getPropertyValue("--pin-bottom");const c=l!==""?parseFloat(l):e;await new Promise((l=>s((()=>{if(this.tableDims.height+o-(t+r)<=c){i.classList.add(`${_}__pinned`,`${_}__pinned--bottom`)}else{i.classList.remove(`${_}__pinned`,`${_}__pinned--bottom`)}if(n!==a){a.style.setProperty("--pin-bottom",`${e-1}px`);e+=r-1;n=a}l()}))))}}))}}async assessCols(){if(!this.startColumns.length&&!this.endColumns.length)return;let t;let n;let e;const o=new Promise((o=>{if(this.startColumns.length){r((()=>{const{offsetX:i}=this.getParentOffsets();let s=i;e=Array.from(this.startColumns[0].parentElement.children);for(const o of this.startColumns){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedStart.find((t=>t===o));if(t.x<s){if(!n)this.pinnedStart=[...this.pinnedStart,o]}else if(n){this.pinnedStart=this.pinnedStart.filter((t=>t!==o))}s+=t.width}if(!this.endColumns.length)o()}))}if(this.endColumns.length){r((()=>{const i=Array.from(this.endColumns).reverse();e=Array.from(this.endColumns[0].parentElement.children);const{offsetX:s}=this.getParentOffsets();let r=0;for(const o of i){t=o.getBoundingClientRect();this.cachedColMeta.set(o,{width:t.width,idx:e.indexOf(o)});n=this.pinnedEnd.find((t=>t===o));if(this.tableDims.width+s-t.right<=r){if(!n)this.pinnedEnd=[o,...this.pinnedEnd]}else if(n){this.pinnedEnd=this.pinnedEnd.filter((t=>t!==o))}r+=t.width}o()}))}}));await o;this.generateCssCacheKey()}cacheX=0;cacheY=0;onScroll(t){if(this.cacheX!==t.x){this.cacheX=t.x;this.assessCols()}if(this.cacheY!==t.y){this.cacheY=t.y;this.assessRows()}}onResize(){const t=this.scrollElement.clientWidth;const n=this.scrollElement.clientHeight;this.tableDims={width:t,height:n};this.assessCols();this.assessRows()}}const st=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.nano-table{display:block;inline-size:100%;--max-col-width:clamp(200px, 500px, 50vw);--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--thead-font-size:0.95rem;--thead-color:#455560;--tfoot-color:#455560;--border-color:#dddbda;--border-style:thin solid var(--border-color);--border-tint-color:#0084a9;--border-tint-style:3px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:250 250 249;--foot-bg-rgb:var(--head-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding-start:0.625rem;--td-padding-end:0.625rem;--td-padding-top:0.6rem;--td-padding-bottom:0.6125rem;--th-padding-start:0.725rem;--th-padding-end:0.625rem;--th-padding-top:0.875rem;--th-padding-bottom:0.6875rem;--td-padding-v:var(--td-padding-top) var(--td-padding-bottom);--td-padding-h:var(--td-padding-start) var(--td-padding-end);--th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--th-padding-h:var(--th-padding-start) var(--th-padding-end);--foot-th-padding-v:var(--td-padding-top) var(--td-padding-bottom);--foot-th-padding-h:var(--td-padding-start) var(--td-padding-end);--head-th-padding-v:var(--th-padding-top) var(--th-padding-bottom);--head-th-padding-h:var(--th-padding-start) var(--th-padding-end);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;inline-size:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));border-inline-end:1px solid transparent;border-block-start:1px solid transparent;position:relative;z-index:1}.nano-tbl__wrap{display:table;min-inline-size:100%}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;position:relative}.nano-tbl__ordered{background-color:var(--ordered-bg);border-inline-start:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;appearance:none;color:inherit;display:flex;gap:10px;align-items:center;inline-size:100%}.nano-tbl__order-btn:focus-visible{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tbl__status-icons{margin-inline:auto 10px;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;transition:scale 0.25s;transform:scale(0);inline-size:100%;block-size:0}.nano-tbl__progress-bar--show{transform:scale(1);block-size:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;border-block-start:var(--border-style);max-inline-size:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}tbody:first-of-type tr:first-child .nano-tbl__td,tbody:first-of-type tr:first-child .nano-tbl__th{border-block-start:none}tbody:last-of-type tr:last-child .nano-tbl__td,tbody:last-of-type tr:last-child .nano-tbl__th{border-block-end:var(--border-style)}.md .nano-tbl__td:first-child .nano-tbl__cell-content,.md .nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--bookend-col-padding)}.md .nano-tbl__td:last-child .nano-tbl__cell-content,.md .nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--bookend-col-padding)}@media (max-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{padding-inline-start:var(--td-padding-start) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{padding-inline-end:var(--td-padding-end) !important}}thead .nano-tbl__td,thead .nano-tbl__th{color:var(--thead-color);font-weight:800;background:rgb(var(--head-bg-rgb)/100%);font-size:var(--thead-font-size);border-block-start:none !important}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--head-th-padding-v);padding-inline:var(--head-th-padding-h)}thead .nano-tbl__td .nano-sortable__keyboard-handle,thead .nano-tbl__th .nano-sortable__keyboard-handle{position:absolute;inset-inline-end:5px;inset-block-start:50%;transform:translateY(-50%);background:white;z-index:10}tfoot .nano-tbl__td,tfoot .nano-tbl__th{color:var(--tfoot-color);font-weight:800;border-block-start:none;background:rgb(var(--foot-bg-rgb)/100%);font-size:var(--thead-font-size)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding-block:var(--foot-th-padding-v);padding-inline:var(--foot-th-padding-h)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgb(var(--ordered-bg-rgb)/80%) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:var(--td-padding-v);padding-inline:var(--td-padding-h)}.nano-tbl__cell-content--no-result{padding-block:2rem}.nano-tbl__cell-content--wrap{white-space:normal;overflow:visible}.nano-tbl tbody{will-change:scroll-position;opacity:1;transition:0.1s ease opacity}.nano-tbl tbody.nano-tbl__loading{z-index:-1;position:relative}.nano-tbl tbody.nano-tbl__inactive{opacity:0}.nano-tbl tbody .nano-tbl__tr:has(~.nano-tbl__tr--placeholder){display:none}.nano-tbl tbody .nano-tbl__tr--placeholder~.nano-tbl__tr{display:none}.nano-tbl th[scope=row]{font-weight:800;margin:0}.nano-tbl__tr{--base-z:0}.nano-tbl__pin{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin .nano-tbl__th,.nano-tbl__pin .nano-tbl__td{z-index:var(--z, var(--base-z, 0))}.nano-tbl__pin--start{position:sticky;inset-inline-start:var(--pin-start, -1px)}.nano-tbl__pin--start::after{content:"";position:absolute;inset:0;box-shadow:5px 0 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-start-active, 0);z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{--z:calc(var(--base-z) + 3) !important}.nano-tbl__pin--end{position:sticky}.nano-tbl__pin--start+.nano-tbl__pin--end{inset-inline-end:auto !important}.nano-tbl__pin--start+.nano-tbl__pin--end::after{display:none}.sm .nano-tbl__pin--end{inset-inline-end:var(--pin-end, -1px);max-inline-size:min(50vw, 200px)}.sm .nano-tbl__pin--end::after{display:block !important;content:"";position:absolute;inset:0;box-shadow:-5px 1px 4px -1px rgba(0, 0, 0, 0.2);opacity:var(--pin-end-active, 0);z-index:-1}.sm .nano-tbl__pinned--end .nano-tbl__pin--end{--z:calc(var(--base-z) + 2) !important}.nano-tbl__pin--top .nano-tbl__th,.nano-tbl__pin--top .nano-tbl__td{position:sticky;inset-block-start:var(--pin-top, -1px)}.nano-tbl__pin--top .nano-tbl__pin--end,.nano-tbl__pin--top .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--top.nano-tbl__pinned--top{--base-z:4}tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__th,tbody .nano-tbl__pin--top.nano-tbl__pinned--top .nano-tbl__td{box-shadow:1px 3px 4px -1px rgba(0, 0, 0, 0.1)}.nano-tbl__pin--bottom .nano-tbl__th,.nano-tbl__pin--bottom .nano-tbl__td{position:sticky;inset-block-end:var(--pin-bottom, -1px)}.nano-tbl__pin--bottom .nano-tbl__pin--end,.nano-tbl__pin--bottom .nano-tbl__pin--start{--z:calc(var(--base-z) + 1)}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom{--base-z:5}.nano-tbl__pin--bottom.nano-tbl__pinned--bottom:has(.nano-tbl__pin--bottom.nano-tbl__pinned--bottom) .nano-tbl__pin{--base-z:6}tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__th,tbody .nano-tbl__pin--bottom.nano-tbl__pinned--bottom .nano-tbl__td{box-shadow:1px -3px 4px -1px rgba(0, 0, 0, 0.07)}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th{border-block-end:var(--border-tint-style)}.nano-tbl tfoot tr:first-of-type td,.nano-tbl tfoot tr:first-of-type th{border-block-start:none}.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{border-block-start:var(--border-style);border-block-end:var(--border-tint-style)}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:first-of-type th{border-block-start:var(--border-tint-style) !important}.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type td,.nano-tbl__pinned--bottom .nano-tbl tfoot tr.nano-tbl__pin--bottom:last-of-type th{border-block-end:none !important}.nano-tbl .unlimited-width{max-inline-size:none}.nano-tbl__spinner{font-size:1.5rem;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:0}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl .nano-skeleton{line-height:var(--cell-line-height)}';const rt=st;const at=false;function lt(t,n=false){if(!performance||!at)return;if(n){performance?.mark("end"+t);performance?.measure(t,"start"+t,"end"+t);const n=performance?.getEntriesByName(t);console.info(n[n.length?n.length-1:0])}else{performance?.mark("start"+t)}}let ct=0;const dt=class{constructor(t){a(this,t);this.nanoTblReady=l(this,"nanoTblReady",7);this.nanoTblBlockRendered=l(this,"nanoTblBlockRendered",7);this.nanoTblBeforeSort=l(this,"nanoTblBeforeSort",7);this.nanoTblAfterSort=l(this,"nanoTblAfterSort",7);this.nanoTblBeforeFilter=l(this,"nanoTblBeforeFilter",7);this.nanoTblAfterFilter=l(this,"nanoTblAfterFilter",7);this.nanoTblBeforeSearch=l(this,"nanoTblBeforeSearch",7);this.nanoTblAfterSearch=l(this,"nanoTblAfterSearch",7);this.nanoTblBeforeEdit=l(this,"nanoTblBeforeEdit",7);this.debounceSetLoading=b(this.debounceSetLoading.bind(this),50)}customRenderer;type="table";caption;showCaption=false;loading=undefined;get _loading(){return this.loading!==undefined?this.loading:this.internalLoading}set _loading(t){if(this.loading!==undefined)return;this.debounceSetLoading(t)}debounceSetLoading(t){this.internalLoading=t}internalLoading=true;placeholderSize=5;rows;handleRowsChange(){if(!this.rows){this._loading=true;return}this._loading=true;Promise.resolve(this.rows).then((async t=>{await M(this.host,t);this.currentFilters="";this.currentSort="";await this.columnInit();if(!this.isReady)requestAnimationFrame((()=>this.setInitialBlockDimension()));this._loading=false;if(this.tablePinnedService)this.tablePinnedService.assessRows()}))}columns=[];async handleColsChange(){await D(this.host,this.columns);if(this.isReady)this.columnInit()}headRender={pinned:"top"};rowRender;footRender={pinned:"bottom"};showFooter=false;perBlock=50;get blocksLength(){return this.blocks.length}searchTerm;customFilterFn;customSortFn;defaultSort=true;handleSearchTermChange(){this.searchStart()}virtualTotalItems=0;virtualTotalItemsChangeHandler(){this.setBlocks()}get appliedFilters(){return this.filters}nanoTblReady;nanoTblBlockRendered;nanoTblBeforeSort;nanoTblAfterSort;nanoTblBeforeFilter;nanoTblAfterFilter;nanoTblBeforeSearch;nanoTblAfterSearch;nanoTblBeforeEdit;async resetSorting(){const t=this.columns.find((t=>!!t.order));if(!t)return;return this.sortStart(null,t.prop)}async addSort(t,n){const e=this.columns.find((n=>n.prop===t));if(!e)throw new Error("Cannot find column with "+t);return this.sortStart(n,e.prop)}async resetFilters(){this.filters=[];return this.filterStart()}async addFilters(t,n=true){if(!n)this.filters=[];return this.filterStart(t,n)}async removeFilters(t){this.filters=this.filters.filter((n=>!t.includes(n.prop)));return this.filterStart()}async updateRow(t,n){this.rows.splice(n,1,t);this.handleRowsChange()}get host(){return o(this)}renderId="tbl-"+ct++;store;filters=[];currentFilters="[]";currentSort="";tableEle;topAnchorEle;tableWrapperEle;activeWatcherIo;tablePinnedService;blocks=[];activeBlocks=[0,1];measureHeight=0;blockElements;blockHeights=[];set measureEle(t){if(!t)return;const n=t.getBoundingClientRect().height;this.measureHeight=Math.abs(this.measureHeight-n)<5?this.measureHeight:n;this.unitHeight=t.querySelector("tr")?.getBoundingClientRect().height||this.unitHeight}unitHeight=0;get scrollParent(){return this._scrollParent}set scrollParent(t){if(t===this._scrollParent)return;if(this._scrollParent){(this._scrollParent===document.documentElement?document:this._scrollParent).removeEventListener("scroll",this.scrollHandler)}(t===document.documentElement?document:t).addEventListener("scroll",this.scrollHandler);this._scrollParent=t}_scrollParent;get primaryBlockIndex(){return this._primaryBlockIndex}set primaryBlockIndex(t){if(this._primaryBlockIndex===t)return;this._primaryBlockIndex=t;this.nanoTblBlockRendered.emit({block:t,totalBlocks:this.blockElements.length})}_primaryBlockIndex;get isReady(){return this._isReady}set isReady(t){if(t===this._isReady)return;this._isReady=t;if(this.isReady)requestAnimationFrame((()=>this.handleReady()))}_isReady=false;handleReady(){const t=window.location.hash;if(t.length>1){try{const n=document.querySelector(t);if(n)n.scrollIntoView()}catch(t){}}this.nanoTblReady.emit()}sortStart=async(t,n,e)=>{if(this.currentSort===t+":"+n)return;this._loading=true;const o=this.nanoTblBeforeSort.emit({column:n,order:t});if(o.defaultPrevented)return;lt("sort");this.currentSort=t+":"+n;this.scrollToTop(e);if(this.customSortFn){try{const e=await this.customSortFn(n,t);if(e===true){this.sortComplete(t,n);this._loading=false;return}}catch(t){console.warn("custom sort failed",t);this.currentSort="";this._loading=false;return}}try{await H(this.host,n,t);this.sortComplete(t,n)}catch(t){console.warn("sort failed",t);this.currentSort=""}finally{if(this.blocks.length)this._loading=false}};sortComplete(t,n){this.columns=this.columns.map((e=>{if(e.prop===n)return{...e,order:t};return{...e,order:null}}));this.nanoTblAfterSort.emit({column:n,order:t});lt("sort",true)}async searchStart(){this._loading=true;const t=this.nanoTblBeforeSearch.emit({term:this.searchTerm});if(t.defaultPrevented)return;lt("search");this.scrollToTop();try{await N(this.host,this.searchTerm);this.nanoTblAfterSearch.emit({term:this.searchTerm});lt("search",true)}catch(t){console.warn("search failed",t)}finally{this._loading=false}}async filterStart(t,n=true){if(t){if(n){this.filters=[...this.filters.filter((n=>!t.find((t=>t.prop===n.prop)))),...t]}else{this.filters=t}}if(this.currentFilters===JSON.stringify(this.filters))return;this._loading=true;const e=this.nanoTblBeforeFilter.emit({filters:this.filters});if(e.defaultPrevented)return;lt("filter");this.currentFilters=JSON.stringify(this.filters);this.scrollToTop();if(this.customFilterFn){try{const t=await this.customFilterFn(this.filters);if(t===true){await this.filterComplete();this._loading=false;return}}catch(t){console.warn("custom filter failed",t);this.currentFilters="";this._loading=false;return}}try{await this.filterComplete()}catch(t){console.warn("filter failed",t)}finally{this._loading=false}}async filterComplete(){this.columns=this.columns.map((t=>{const n=this.filters.find((n=>n.prop===t.prop));if(n&&(typeof n.filter!=="boolean"&&n.filter.length||typeof n.filter==="boolean"))t.filter=n.filter;else if(t.filter!==null&&t.filter!==undefined||!!t.filter&&typeof t.filter!=="boolean"&&!t.filter.length)t.filter=undefined;return t}));await j(this.host,this.filters);this.nanoTblAfterFilter.emit({filters:this.filters});lt("filter",true)}scrollToTop(t){const n=this.scrollParent.style?.scrollBehavior;const e=this.scrollParent.scrollLeft;this.scrollParent.style.scrollBehavior="auto";if(this.topAnchorEle&&!U(this.topAnchorEle,.1)){this.host.scrollIntoView()}if(t&&!U(t,1))setTimeout((()=>t.scrollIntoView({block:"start"})),500);if(e)this.scrollParent.scrollLeft=e;if(n)this.scrollParent.style.scrollBehavior=n;this.scrollHandler()}setMeasureElement(){return new Promise((t=>{r((()=>{this.measureEle=this.blockElements.find((t=>!t?.classList?.contains(`${_}__inactive`)));t()}))}))}setInitialBlockDimension(){if(!this.blockElements?.length)return;lt("blockDims");const t=async()=>{await this.setMeasureElement();if(this.unitHeight)return true;return false};const n=new Promise((n=>{t().then((async e=>{if(e)n();else{const e=new IntersectionObserver((async()=>{if(await t()){n();e.disconnect()}}),{root:this.scrollParent});e.observe(this.tableEle)}}))}));n.then((()=>{lt("blockDims",true);lt("init",true);requestAnimationFrame((()=>this.isReady=true))}))}async columnInit(){this.filters=this.columns.filter((t=>t.filter!==undefined&&t.filter!==null)).map((t=>{const{filter:n,prop:e}=t;return{prop:e,filter:n}}));if(this.searchTerm){await this.searchStart()}if(this.filters.length){await this.filterStart()}const t=this.columns.find((t=>!!t.order));if(t){await this.sortStart(t.order,t.prop)}if(this.tablePinnedService)this.tablePinnedService.assessCols()}setBlocks(){const t=this.store.data.state.rows;if(!t.length){this.blocks=[];return}lt("setBlocks");let n=1;const e=this.virtualTotalItems>t.length?this.virtualTotalItems:t.length;let o=[];const i=[];for(n;n<=e;n++){o.push(this.store.data.state.rows[n-1]||{__uuid:""});if(n%this.perBlock===0){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())});o=[]}}if(o.length){i.push({rows:o,__uuid:h(o.map((t=>t.__uuid)).join())})}this.blocks=i;lt("setBlocks",true)}getBlockHeight(t){if(this.blockHeights.length){const n=this.blockHeights.find((n=>n.blockIndex===t));if(n&&n.height)return n.height}const n=this.blocks[t].rows.length;if(n===this.perBlock&&this.measureHeight){return this.measureHeight}return this.unitHeight?this.unitHeight*n:100}setBlockHeight(){this.activeBlocks.forEach((t=>{const n=this.blockElements[t];if(!n)return;r((()=>{if(n.classList.contains(`${_}__inactive`))return;const e=n.getBoundingClientRect().height;const o=this.blockHeights.findIndex((n=>n.blockIndex===t));if(o>-1){this.blockHeights[o]={height:e,blockIndex:t}}else this.blockHeights.push({height:e,blockIndex:t})}))}))}scrollHandler=()=>{let t=0;lt("scrollHandler");if(!this.store?.general.state.isActive||!this.rows)return;if(this.primaryBlockIndex===undefined)this.primaryBlockIndex=0;r((()=>{t=typeof this.scrollParent.scrollTop!=="undefined"?this.scrollParent.scrollTop:window.scrollY;t+=this.host.offsetTop;if(this.tablePinnedService){this.tablePinnedService.onScroll({x:typeof this.scrollParent.scrollLeft!=="undefined"?this.scrollParent.scrollLeft:window.scrollX,y:t})}let n=this.host.offsetTop;let e=0;const o=this.blocks.length;while(e<o&&t>=n){n+=this.getBlockHeight(e);if(t<n){const t=[e,e+1];if(t.toString()!==this.activeBlocks.toString()){this.activeBlocks=t}this.primaryBlockIndex=e}e++}lt("scrollHandler",true)}))};processSlots(){if(!this.caption&&!this.host.querySelector('[slot="caption"]')){console.error("For accessibility you must set a `caption` prop or use the `caption` slot")}}handleResizeChange=t=>{this.tableWrapperEle.className="";let n=[`${_}__wrap`];if(t.target?.className)n=[...t.target.className.split(" "),...n];this.tableWrapperEle.classList.add(...n.filter((t=>!!t)))};setupActiveWatcher(){if(!this.host||!this.scrollParent||!this.store)return;if(this.activeWatcherIo){this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined}const t=this.activeWatcherIo=new IntersectionObserver((([t])=>{if(t.isIntersecting)this.store.general.state.isActive=true;else this.store.general.state.isActive=false}),{root:this.scrollParent,threshold:0});t.observe(this.host)}async componentWillLoad(){lt("init");this.store=await A(this.host,this.columns,this.scrollParent,this.isReady);this.handleRowsChange();this.store.general.onChange("isActive",(()=>{this.scrollHandler()}));this.store.data.onChange("rows",(()=>this.setBlocks()));this.processSlots();this.setBlocks();this.scrollParent=f(this.host);this.setupActiveWatcher()}connectedCallback(){this.scrollParent=f(this.host);this.setupActiveWatcher()}componentDidLoad(){this.setInitialBlockDimension();if(!this.tablePinnedService){this.tablePinnedService=new it(this.tableEle,this.scrollParent)}}componentShouldUpdate(t,n,e){if(["rows","columns"].includes(e))return false}componentWillRender(){lt("render")}componentDidRender(){this.setMeasureElement().then((()=>this.setBlockHeight()));lt("render",true)}disconnectedCallback(){if(!this.activeWatcherIo)return;this.activeWatcherIo.disconnect();this.activeWatcherIo=undefined;(this.scrollParent===document.documentElement?document:this.scrollParent).removeEventListener("scroll",this.scrollHandler)}render(){this.blockElements=[];return d(c,{key:"7d6193dc4b48fa4085ac1029a0c70dcf2f07a6fa",class:"nano-table"},d("div",{key:"acbfb0c4642cbce4dc1b8c9e22be90cbcbec84a9",class:`${_}__top-anchor`,ref:t=>this.topAnchorEle=t}," "),d("nano-resize-observe",{key:"9a38da33f0cfb64329331510f196ef7c42e51ca3",states:"576w sm, 768w md",class:"sm md",onNanoResizeStateChange:this.handleResizeChange,onNanoResize:()=>{if(this.tablePinnedService)this.tablePinnedService.onResize()}}),d("div",{key:"25aad643f108a5e48319a20a70a36066eb099d5d",class:`${_}__wrap sm md`,ref:t=>this.tableWrapperEle=t,"aria-labelledby":"nano-table-caption-"+this.renderId,tabindex:this.type==="grid"?"0":undefined},d("nano-progress-bar",{key:"519fc388c4926af6bd9dfaba2112fa2db1dbc3cd",indeterminate:true,class:{[`${_}__progress-bar`]:true,[`${_}__progress-bar--show`]:this._loading}}),d("table",{key:"b58a665666893b4b15aad6ab7e7a08bd20527cb2",role:this.type==="grid"?"grid":undefined,"aria-rowcount":this.store.data.state.rows.length,"aria-colcount":this.store.config.state.columns.length,class:`${_}`,ref:t=>this.tableEle=t,id:"nano-table-"+this.renderId},d("caption",{key:"5bc653ff3a487546e652cd787996dfde662fdf67",class:{[`${_}__caption`]:true,[`${_}__caption--hide`]:!this.showCaption},id:"nano-table-caption-"+this.renderId},d("slot",{key:"a6c855db5a74c123d08ad4e65954f17573c9ea3a",name:"caption"},this.caption)),d("thead",{key:"743820b2abc85adac1fe4babf918be10a8e62a26"},d(et,{key:"e7a9a7c27033c2ed69bdeb8bfa68af3a3d721036",rowRenderer:this.headRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.headRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})])))),this._loading&&!this.blocks.length&&d("tbody",{key:"6c7d553988620e1f3ee9cbf0d2c6bade44c5eefa",class:`${_}__active ${_}__loading`},[...Array(10).keys()].map((t=>d("tr",null,this.store.config.state.columns.map(((n,e)=>d(Z,{rowIndex:t,colIndex:e,nestedContent:()=>d("nano-skeleton",null)}))))))),d("tr",{key:"092f27f8726f12b7fa10d166b560d6df6593bbc1",hidden:!!this._loading||!!this.blocks.length},d("th",{key:"edfbca925f99550897c3b460a6efcb326863a591",class:`${_}__th`,colSpan:this.store.config.state.columns.length},d("div",{key:"5d4b996c3141b6583317a2b28357fe7af3a873bc",class:"nano-tbl__cell-content nano-tbl__cell-content--no-result"},d("slot",{key:"00db3e5649ccdc97062881ff7b3801fb1847c2db",name:"no-results"},"No results found")))),this.blocks.map(((t,n)=>d("tbody",{key:t.__uuid,id:`tbody-${this.renderId}-${n}`,ref:t=>{this.blockElements.push(t)},class:{[`${_}__inactive`]:!this.activeBlocks.includes(n),[`${_}__active`]:this.activeBlocks.includes(n)}},this.activeBlocks.includes(n)?t.rows.map(((t,e)=>{const o=n>0?n*this.perBlock+e:e;return d(nt,{rowRenderer:this.rowRender,rowModel:t,rowIndex:o},this.store.config.state.columns.map(((t,n)=>d(Z,{rowIndex:o,colIndex:n}))))})):d("tr",{class:`${_}__tr--placeholder`},d("td",{colSpan:this.store.config.state.columns.length,style:{height:this.getBlockHeight(n)+"px"}}))))),this.showFooter&&d("tfoot",{key:"15a1a79049ad87f63c87e2d905bc401a7d4bbb60"},d(et,{key:"ee06dea32599c6dae3fcdcabc5a5bd0ea6536aea",rowRenderer:this.footRender},this.store.config.state.columns.map((t=>[d(G,{column:t,headRenderer:this.footRender,onColumnSortClick:this.sortStart,defaults:{sortable:this.defaultSort}})]))))),!!this.blocks.length&&d("nano-spinner",{key:"dd0041a5232a79a9f1882d2b9e5beebd79587a5d",type:"circle",class:{[`${_}__spinner`]:true,[`${_}__spinner--show`]:this._loading}})))}static get watchers(){return{rows:["handleRowsChange"],columns:["handleColsChange"],searchTerm:["handleSearchTermChange"],virtualTotalItems:["virtualTotalItemsChangeHandler"]}}};dt.style=rt;export{dt as T,k as c};
|
5
|
+
//# sourceMappingURL=nano-table-3965ddd0.js.map
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
3
3
|
*/
|
4
|
-
export{T as nano_table}from"./nano-table-
|
4
|
+
export{T as nano_table}from"./nano-table-3965ddd0.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";
|
5
5
|
//# sourceMappingURL=nano-table.entry.js.map
|
@@ -0,0 +1,5 @@
|
|
1
|
+
/*!
|
2
|
+
* Web Components for Nanopore digital Web Apps
|
3
|
+
*/
|
4
|
+
import{c as t}from"./nano-table-3965ddd0.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";const r="table.worker";const e="stencil.table.worker";const o=new URL("table.worker-da5412ed.js",import.meta.url).href;let s;try{s=t(o,r,e)}catch(c){const a=new Blob(['importScripts("'+o+'")'],{type:"text/javascript"});const i=URL.createObjectURL(a);s=t(i,r,e);URL.revokeObjectURL(i)}export{s as worker,e as workerMsgId,r as workerName,o as workerPath};
|
5
|
+
//# sourceMappingURL=table.worker-8e04f768.js.map
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { Color } from '../../types/shared';
|
2
2
|
/**
|
3
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
3
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
4
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
4
5
|
*/
|
5
6
|
export declare class Icon {
|
6
7
|
private io?;
|
@@ -1296,7 +1296,8 @@ export namespace Components {
|
|
1296
1296
|
"theme": 'dark' | 'light';
|
1297
1297
|
}
|
1298
1298
|
/**
|
1299
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
1299
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
1300
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
1300
1301
|
*/
|
1301
1302
|
interface NanoIcon {
|
1302
1303
|
/**
|
@@ -3382,7 +3383,8 @@ declare global {
|
|
3382
3383
|
new (): HTMLNanoHeroElement;
|
3383
3384
|
};
|
3384
3385
|
/**
|
3385
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
3386
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
3387
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
3386
3388
|
*/
|
3387
3389
|
interface HTMLNanoIconElement extends Components.NanoIcon, HTMLStencilElement {
|
3388
3390
|
}
|
@@ -5309,7 +5311,8 @@ declare namespace LocalJSX {
|
|
5309
5311
|
"theme"?: 'dark' | 'light';
|
5310
5312
|
}
|
5311
5313
|
/**
|
5312
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
5314
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
5315
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
5313
5316
|
*/
|
5314
5317
|
interface NanoIcon {
|
5315
5318
|
/**
|
@@ -6993,7 +6996,8 @@ declare module "@stencil/core" {
|
|
6993
6996
|
*/
|
6994
6997
|
"nano-hero": LocalJSX.NanoHero & JSXBase.HTMLAttributes<HTMLNanoHeroElement>;
|
6995
6998
|
/**
|
6996
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
6999
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
7000
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
6997
7001
|
*/
|
6998
7002
|
"nano-icon": LocalJSX.NanoIcon & JSXBase.HTMLAttributes<HTMLNanoIconElement>;
|
6999
7003
|
/**
|
package/docs-json.json
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
{
|
2
|
-
"timestamp": "2025-
|
2
|
+
"timestamp": "2025-04-24T16:09:23",
|
3
3
|
"compiler": {
|
4
4
|
"name": "@stencil/core",
|
5
5
|
"version": "4.27.2",
|
@@ -11394,7 +11394,7 @@
|
|
11394
11394
|
"encapsulation": "shadow",
|
11395
11395
|
"tag": "nano-icon",
|
11396
11396
|
"readme": "# nano-icon\n\n",
|
11397
|
-
"docs": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path)
|
11397
|
+
"docs": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\nLazily loads SVG for each icon, so will only request the icons that you're using and that are visible.",
|
11398
11398
|
"docsTags": [],
|
11399
11399
|
"usage": {},
|
11400
11400
|
"props": [
|
package/docs-vscode.json
CHANGED
@@ -1830,7 +1830,7 @@
|
|
1830
1830
|
"name": "nano-icon",
|
1831
1831
|
"description": {
|
1832
1832
|
"kind": "markdown",
|
1833
|
-
"value": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path)
|
1833
|
+
"value": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\nLazily loads SVG for each icon, so will only request the icons that you're using and that are visible."
|
1834
1834
|
},
|
1835
1835
|
"attributes": [
|
1836
1836
|
{
|
package/hydrate/index.js
CHANGED
@@ -7991,14 +7991,18 @@ class Checkbox {
|
|
7991
7991
|
if (!this.input)
|
7992
7992
|
return;
|
7993
7993
|
this.input.checked = this.checked;
|
7994
|
-
if (this.inputType === 'radio' &&
|
7994
|
+
if (this.inputType === 'radio' &&
|
7995
|
+
this.name &&
|
7996
|
+
this.checked &&
|
7997
|
+
this.host.isConnected) {
|
7995
7998
|
const form = this.host.closest('form');
|
7999
|
+
const root = this.host.getRootNode();
|
7996
8000
|
let ctrls;
|
7997
8001
|
if (form) {
|
7998
8002
|
ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
|
7999
8003
|
}
|
8000
8004
|
else {
|
8001
|
-
ctrls = Array.from(
|
8005
|
+
ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
|
8002
8006
|
}
|
8003
8007
|
ctrls.map((el) => {
|
8004
8008
|
if (el !== this.host)
|
@@ -8177,14 +8181,14 @@ class Checkbox {
|
|
8177
8181
|
}
|
8178
8182
|
render() {
|
8179
8183
|
const labelId = this.inputId + '-lbl';
|
8180
|
-
return (h(Host, { key: '
|
8184
|
+
return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
|
8181
8185
|
nanocb: true,
|
8182
8186
|
'nanocb--checked': this.checked,
|
8183
8187
|
'nanocb--invalid': this.invalid,
|
8184
8188
|
'nanocb--disabled': this.disabled,
|
8185
8189
|
'nanocb--focused': this.hasFocus,
|
8186
8190
|
'nanocb--indeterminate': this.indeterminate,
|
8187
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
8191
|
+
}, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
|
8188
8192
|
}
|
8189
8193
|
static get watchers() { return {
|
8190
8194
|
"checked": ["handleCheckedChange"],
|
@@ -17346,7 +17350,8 @@ const iconCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:bor
|
|
17346
17350
|
var NanoIconStyle0 = iconCss;
|
17347
17351
|
|
17348
17352
|
/**
|
17349
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
17353
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
17354
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
17350
17355
|
*/
|
17351
17356
|
class Icon {
|
17352
17357
|
constructor(hostRef) {
|
@@ -17473,7 +17478,7 @@ class Icon {
|
|
17473
17478
|
this.name.indexOf('chevron') > -1) &&
|
17474
17479
|
this.isRtl() &&
|
17475
17480
|
this.flipRtl !== false);
|
17476
|
-
return (h(Host, { key: '
|
17481
|
+
return (h(Host, { key: 'bcb65502c19151978a0035c5493e1cfe37019c4a', class: {
|
17477
17482
|
...createColorClasses(this.color),
|
17478
17483
|
loading: this.isLoading,
|
17479
17484
|
[`icon-${this.size}`]: !!this.size,
|
@@ -17605,16 +17610,16 @@ class IconButton {
|
|
17605
17610
|
}
|
17606
17611
|
content() {
|
17607
17612
|
const TagType = this.href === undefined ? 'button' : 'a';
|
17608
|
-
return (
|
17613
|
+
return (h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
|
17609
17614
|
'icon-button': true,
|
17610
17615
|
'icon-button--disabled': this.disabled,
|
17611
|
-
}, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined },
|
17616
|
+
}, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
|
17612
17617
|
}
|
17613
17618
|
render() {
|
17614
17619
|
if (this.showTooltip) {
|
17615
|
-
return (
|
17620
|
+
return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
|
17616
17621
|
}
|
17617
|
-
return (
|
17622
|
+
return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
|
17618
17623
|
}
|
17619
17624
|
static get style() { return NanoIconButtonStyle0; }
|
17620
17625
|
static get cmpMeta() { return {
|
package/hydrate/index.mjs
CHANGED
@@ -7987,14 +7987,18 @@ class Checkbox {
|
|
7987
7987
|
if (!this.input)
|
7988
7988
|
return;
|
7989
7989
|
this.input.checked = this.checked;
|
7990
|
-
if (this.inputType === 'radio' &&
|
7990
|
+
if (this.inputType === 'radio' &&
|
7991
|
+
this.name &&
|
7992
|
+
this.checked &&
|
7993
|
+
this.host.isConnected) {
|
7991
7994
|
const form = this.host.closest('form');
|
7995
|
+
const root = this.host.getRootNode();
|
7992
7996
|
let ctrls;
|
7993
7997
|
if (form) {
|
7994
7998
|
ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
|
7995
7999
|
}
|
7996
8000
|
else {
|
7997
|
-
ctrls = Array.from(
|
8001
|
+
ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
|
7998
8002
|
}
|
7999
8003
|
ctrls.map((el) => {
|
8000
8004
|
if (el !== this.host)
|
@@ -8173,14 +8177,14 @@ class Checkbox {
|
|
8173
8177
|
}
|
8174
8178
|
render() {
|
8175
8179
|
const labelId = this.inputId + '-lbl';
|
8176
|
-
return (h(Host, { key: '
|
8180
|
+
return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
|
8177
8181
|
nanocb: true,
|
8178
8182
|
'nanocb--checked': this.checked,
|
8179
8183
|
'nanocb--invalid': this.invalid,
|
8180
8184
|
'nanocb--disabled': this.disabled,
|
8181
8185
|
'nanocb--focused': this.hasFocus,
|
8182
8186
|
'nanocb--indeterminate': this.indeterminate,
|
8183
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
8187
|
+
}, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
|
8184
8188
|
}
|
8185
8189
|
static get watchers() { return {
|
8186
8190
|
"checked": ["handleCheckedChange"],
|
@@ -17342,7 +17346,8 @@ const iconCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:bor
|
|
17342
17346
|
var NanoIconStyle0 = iconCss;
|
17343
17347
|
|
17344
17348
|
/**
|
17345
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
17349
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
17350
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
17346
17351
|
*/
|
17347
17352
|
class Icon {
|
17348
17353
|
constructor(hostRef) {
|
@@ -17469,7 +17474,7 @@ class Icon {
|
|
17469
17474
|
this.name.indexOf('chevron') > -1) &&
|
17470
17475
|
this.isRtl() &&
|
17471
17476
|
this.flipRtl !== false);
|
17472
|
-
return (h(Host, { key: '
|
17477
|
+
return (h(Host, { key: 'bcb65502c19151978a0035c5493e1cfe37019c4a', class: {
|
17473
17478
|
...createColorClasses(this.color),
|
17474
17479
|
loading: this.isLoading,
|
17475
17480
|
[`icon-${this.size}`]: !!this.size,
|
@@ -17601,16 +17606,16 @@ class IconButton {
|
|
17601
17606
|
}
|
17602
17607
|
content() {
|
17603
17608
|
const TagType = this.href === undefined ? 'button' : 'a';
|
17604
|
-
return (
|
17609
|
+
return (h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
|
17605
17610
|
'icon-button': true,
|
17606
17611
|
'icon-button--disabled': this.disabled,
|
17607
|
-
}, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined },
|
17612
|
+
}, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
|
17608
17613
|
}
|
17609
17614
|
render() {
|
17610
17615
|
if (this.showTooltip) {
|
17611
|
-
return (
|
17616
|
+
return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
|
17612
17617
|
}
|
17613
|
-
return (
|
17618
|
+
return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
|
17614
17619
|
}
|
17615
17620
|
static get style() { return NanoIconButtonStyle0; }
|
17616
17621
|
static get cmpMeta() { return {
|
package/package.json
CHANGED
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"table.worker-ad250672.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"table.worker-1bc9c170.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
/*!
|
2
|
-
* Web Components for Nanopore digital Web Apps
|
3
|
-
*/
|
4
|
-
import{c as t}from"./nano-table-4481d4e1.js";import"./index-6cc72cd9.js";import"./renderer-4bc3e2dc.js";import"./math-d160f8a6.js";import"./throttle-df960210.js";import"./scroll-parent-be39fbd0.js";import"./index-f5f7b950.js";const e="table.worker";const r="stencil.table.worker";const o=new URL("table.worker-da5412ed.js",import.meta.url).href;let s;try{s=t(o,e,r)}catch(c){const a=new Blob(['importScripts("'+o+'")'],{type:"text/javascript"});const i=URL.createObjectURL(a);s=t(i,e,r);URL.revokeObjectURL(i)}export{s as worker,r as workerMsgId,e as workerName,o as workerPath};
|
5
|
-
//# sourceMappingURL=table.worker-1bc9c170.js.map
|
File without changes
|