npm - @nanoporetech-digital/components - Versions diffs - 4.0.0 → 4.2.0 - Mend

@nanoporetech-digital/components 4.0.0 → 4.2.0

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

Files changed (116) hide show

package/dist/components/global-nav-user-profile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"global-nav-user-profile.js","mappings":";;;;;;MAea,oBAAoB;;;;;;;;EAa/B,MAAM;;IACJ,QACE,CAAC,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc,IAChD,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT,EACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,KAClC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,~~kCAAkC~~,CAAC,~~EACrD~~,GAAG,EAAC,eAAe,GACnB,CACH,CACG,EAEN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ,EAEnD,YAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,aAAa,CAAC,SAAS,UAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF,EAEN,WAAK,KAAK,EAAC,OAAO,IAChB,WAAK,KAAK,EAAC,eAAe,IACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/global-nav/global-nav-user-profile.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n getAssetPath,\n ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/*\n Nanopore digital global navigation user profile.\n /\n@Component({\n tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n /\n Logged in user details automatically populated from MyAccount\n /\n @Prop() myAccountUser: MyAccountUser;\n\n /\n Link to the user profile\n */\n @Prop() userProfileUrl: string;\n\n // Render output\n\n render() {\n return (\n !!this.myAccountUser && (\n <a href={this.userProfileUrl} class=\"user-profile\">\n <div class=\"left\">\n <div class=\"avatar-container\">\n <img\n class=\"avatar\"\n src={this.myAccountUser?.small_avatar_url}\n alt=\"User Avatar\"\n height={75}\n width={75}\n />\n {this.myAccountUser.is_nanopore_user && (\n <img\n class=\"logo-small\"\n src={getAssetPath(`/nano-assets/ont-wheel-light.svg`)}\n alt=\"Nanopore Logo\"\n />\n )}\n </div>\n\n <div class=\"user-details\">\n <span class=\"name\">{this.myAccountUser.name}</span>\n\n <span class=\"bio\">\n {this.myAccountUser.job_title} at {this.myAccountUser.company}\n </span>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"chevron-right\">\n <nano-icon\n slot=\"icon-end\"\n name=\"light/chevron-right\"\n aria-label=\"navigate to ...\"\n ></nano-icon>\n </div>\n </div>\n </a>\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"global-nav-user-profile.js","mappings":";;;;;;MAea,oBAAoB;;;;;;;;EAa/B,MAAM;;IACJ,QACE,CAAC,CAAC,IAAI,CAAC,aAAa,KAClB,SAAG,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAC,cAAc,IAChD,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,EACzC,GAAG,EAAC,aAAa,EACjB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,GACT,EACD,IAAI,CAAC,aAAa,CAAC,gBAAgB,KAClC,WACE,KAAK,EAAC,YAAY,EAClB,GAAG,EAAE,YAAY,CAAC,oCAAoC,CAAC,EACvD,GAAG,EAAC,eAAe,GACnB,CACH,CACG,EAEN,WAAK,KAAK,EAAC,cAAc,IACvB,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAQ,EAEnD,YAAM,KAAK,EAAC,KAAK,IACd,IAAI,CAAC,aAAa,CAAC,SAAS,UAAM,IAAI,CAAC,aAAa,CAAC,OAAO,CACxD,CACH,CACF,EAEN,WAAK,KAAK,EAAC,OAAO,IAChB,WAAK,KAAK,EAAC,eAAe,IACxB,iBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,qBAAqB,gBACf,iBAAiB,GACjB,CACT,CACF,CACJ,CACL,EACD;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/global-nav/global-nav-user-profile.tsx"],"sourcesContent":["import {\n Component,\n h,\n Prop,\n getAssetPath,\n ComponentInterface,\n} from '@stencil/core';\nimport { MyAccountUser } from './global-nav-interface';\n\n/*\n Nanopore digital global navigation user profile.\n /\n@Component({\n tag: 'nano-global-nav-user-profile',\n})\nexport class GlobalNavUserProfile implements ComponentInterface {\n /\n Logged in user details automatically populated from MyAccount\n /\n @Prop() myAccountUser: MyAccountUser;\n\n /\n Link to the user profile\n */\n @Prop() userProfileUrl: string;\n\n // Render output\n\n render() {\n return (\n !!this.myAccountUser && (\n <a href={this.userProfileUrl} class=\"user-profile\">\n <div class=\"left\">\n <div class=\"avatar-container\">\n <img\n class=\"avatar\"\n src={this.myAccountUser?.small_avatar_url}\n alt=\"User Avatar\"\n height={75}\n width={75}\n />\n {this.myAccountUser.is_nanopore_user && (\n <img\n class=\"logo-small\"\n src={getAssetPath(`../nano-assets/ont-wheel-light.svg`)}\n alt=\"Nanopore Logo\"\n />\n )}\n </div>\n\n <div class=\"user-details\">\n <span class=\"name\">{this.myAccountUser.name}</span>\n\n <span class=\"bio\">\n {this.myAccountUser.job_title} at {this.myAccountUser.company}\n </span>\n </div>\n </div>\n\n <div class=\"right\">\n <div class=\"chevron-right\">\n <nano-icon\n slot=\"icon-end\"\n name=\"light/chevron-right\"\n aria-label=\"navigate to ...\"\n ></nano-icon>\n </div>\n </div>\n </a>\n )\n );\n }\n}\n"],"version":3}

package/dist/components/icon.js CHANGED Viewed

@@ -35,7 +35,7 @@ const getNamedUrl = (iconName) => {
   if (url) {
     return url;
   }
-  return getAssetPath(`/nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
+  return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);
 };
 const getName = (iconName, icon) => {
   if (!iconName && icon && !isSrc(icon)) {

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

	@@ -1 +1 @@
1	- {"file":"icon.js","mappings":"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","names":[],"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 width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: 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 height: 100%;\n width: 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 h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"icon.js","mappings":"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","names":[],"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 width: var(--icon-size);\n height: var(--icon-size);\n min-width: var(--icon-size);\n min-height: 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 height: 100%;\n width: 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 h,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../interface';\n\n/\n An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n /\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /\n Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n /\n @Prop() color?: Color;\n\n /\n Specifies the label to use for accessibility. Defaults to the icon name.\n /\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /\n Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n /\n @Prop() flipRtl?: boolean;\n\n /\n Specifies which icon to use from the built-in set of icons.\n /\n @Prop() name?: string;\n\n /\n Specifies the exact `src` of an SVG file to use.\n /\n @Prop() src?: string;\n\n /\n A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n /\n @Prop() icon?: any;\n\n /\n The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n /\n @Prop() size?: 'small' \| 'large';\n\n /\n If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n private setAriaLabel() {\n if (!this.ariaLabel) {\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/\\-/g, ' ');\n }\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting \|\| (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // browser doesn't support IntersectionObserver\n // so just fallback to always show it\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n });\n }\n }\n }\n this.setAriaLabel();\n }\n\n render() {\n const flipRtl =\n this.flipRtl \|\|\n (this.name &&\n (this.name.indexOf('arrow') > -1 \|\|\n this.name.indexOf('chevron') > -1) &&\n (this.el.ownerDocument as Document).dir === 'rtl' &&\n this.flipRtl !== false);\n\n return (\n <Host\n role=\"img\"\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-checkbox.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { f as focusVisible } from './focus-visible.js';
 import { c as createColorClasses } from './theme.js';
-const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:0.625em;inset-block-start:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:0.75em;inset-block-start:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:0.475em;inset-block-start:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:10px 0;padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
+const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));width:0;height:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:10px 0;padding-block:0;display:flex;align-items:center;font-stretch:condensed;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;-webkit-border-end:none;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
 let checkboxIds = 0;
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/nano-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-style: Initial border style. Defaults to 1px solid #{map.get($colors, palegrey)};\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-style: 1px solid #{map.get($colors, palegrey)};\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-style: 1px solid #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.625em;\n inset-block-start: 0.625em;\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: 0.75em;\n inset-block-start: 0.75em;\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-border-color);\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n border-width: 0.3125em;\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: 0.475em;\n inset-block-start: 0.1875em;\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n padding-inline: 10px 0;\n padding-block: 0;\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n The form element to associate the input with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-checkbox.js","mappings":"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","names":[],"sources":["./src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n /*\n @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get($colors, palegrey)};\n * @prop --check-border-size: initial border size. Default to 1px;\n * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n /\n\n --focus-shadow: #{$control-focus-style};\n --invalid-shadow: #{$control-focus-size + ' ' map.get($colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get($colors, white)};\n --check-border-color: #{map.get($colors, palegrey)};\n --check-border-size: 1px;\n --check-border-style: var(--check-border-size) solid var(--check-border-color);\n --check-checked-bg-color: #{map.get($colors, darkgrey)};\n --check-checked-border-color: #{map.get($colors, darkgrey)};\n --check-checked-higlight-color: #{map.get($colors, white)};\n --check-base-size: inherit;\n\n // type specific\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n --segment-color: #{map.get($colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n display: inline-block;\n max-width: 100%;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host([type='tag']) {\n text-transform: uppercase;\n\n --control-padding: 0.2rem 1rem;\n}\n\n:host([type='radio'][checked]):not([checked='false']) {\n --check-border-size: 0.3125em;\n}\n\n:host([type='segment']) {\n --check-border-style: none;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n --check-border-color: #{rgba(map.get($colors, palegrey), 0.5)};\n --segment-border-radius: 5px;\n --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n --tagbox-rgb: var(--nano-color-base-rgb);\n --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n padding: var(--padding);\n cursor: pointer;\n display: flex;\n align-items: center;\n line-height: 1.2;\n position: relative;\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n height: 1.5em;\n width: 1.5em;\n min-width: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.725em - var(--check-border-size));\n inset-block-start: calc(0.725em - var(--check-border-size));\n width: 0;\n height: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.825em - var(--check-border-size));\n inset-block-start: calc(0.825em - var(--check-border-size));\n height: 0;\n width: 0;\n border: solid var(--check-checked-higlight-color);\n border-width: 0 0.1875em 0.1875em 0;\n transform: rotate(0deg) scale(0);\n opacity: 1;\n transition: all 0.15s ease-out;\n\n .nanocb--indeterminate & {\n border-width: 0 0 0.1875em;\n }\n }\n }\n\n &--segment,\n &--segment-pill {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include visually-hide();\n\n &::before {\n display: none;\n }\n }\n }\n\n &--invalid:not(.nanocb--focused) {\n .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--invalid-shadow);\n\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--invalid-shadow);\n z-index: 1;\n }\n }\n }\n\n input {\n @include visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), var(--focus-shadow);\n }\n\n &.focus-visible:focus ~ .nanocb__input {\n &--tag + .nanocb__label,\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n box-shadow: var(--focus-shadow);\n z-index: 1;\n }\n }\n\n &:checked ~ .nanocb__input {\n border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border-color: var(--check-checked-border-color);\n\n &--segment + .nanocb__label,\n &--segment-pill + .nanocb__label {\n color: var(--check-checked-higlight-color);\n background-color: var(--check-checked-bg-color);\n box-shadow: inset 0 3px 4px rgb(0 0 0 / 20%);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-checked-higlight-color);\n\n &::after {\n border: solid var(--check-checked-border-color);\n border-width: 0 0.125em 0.125em 0;\n opacity: 0;\n }\n\n &::before {\n border-radius: var(--radio-border-radius);\n }\n }\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: calc(0.575em - var(--check-border-size));\n inset-block-start: calc(0.2875em - var(--check-border-size));\n width: 0.375em;\n height: 0.75em;\n border-radius: 0;\n }\n }\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n }\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border: 0.125em solid var(--check-checked-bg-color);\n\n &::after {\n transform: scale(1);\n opacity: 1;\n inset-inline-start: 0.3125em;\n inset-block-start: 0;\n width: 0.7em;\n height: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n &__label {\n padding-inline: 10px 0;\n padding-block: 0;\n display: flex;\n align-items: center;\n font-stretch: condensed;\n line-height: 1;\n flex: 1;\n justify-content: space-between;\n\n &--segment,\n &--segment-pill {\n border: var(--check-border-style);\n border-radius: var(--segment-border-radius);\n box-shadow: var(--segment-shadow);\n display: inline-flex;\n padding: var(--control-padding);\n background: var(--check-bg-color);\n color: var(--segment-color);\n align-items: center;\n width: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :host(:first-of-type:last-of-type) & {\n border-radius: var(--segment-border-radius);\n border: var(--check-border-style);\n }\n }\n\n &--tag {\n letter-spacing: 2px;\n font-weight: 500;\n font-size: 0.65em;\n line-height: 1.4;\n padding: var(--control-padding);\n border: 2px solid #b5aea7;\n border-color: var(--tagbox-border-color);\n background-color: var(--tagbox-bg-color);\n transition: all 0.2s;\n border-radius: var(--cb-border-radius);\n width: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\n font-weight: 200;\n position: relative;\n font-family: inherit;\n font-size: 1.8em;\n display: inline-block;\n transform: rotate(0deg);\n transform-origin: center;\n }\n\n span {\n display: block;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n Event,\n EventEmitter,\n h,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport type {\n CheckboxChangeEventDetail,\n ControlValidity,\n Color,\n} from '../../interface';\n\nlet checkboxIds = 0;\n\n/*\n `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n \n @slot - if you do not set a label attribute, you can use this slot for more complex markup\n /\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' \| 'radio' = 'checkbox';\n\n /* @internal /\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /\n checked property that can be used to get/set the value. accepts only boolean values\n /\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n ).filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /\n If `true`, the user cannot interact with the checkbox.\n /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /\n The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n /\n @Prop({ reflect: true }) value: string = 'on';\n\n /\n The name of the control, which is submitted with the form data.\n /\n @Prop({ reflect: true }) name: string;\n\n /\n Set to true to make the field required.\n /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Controls the underlying field type and style.\n /\n @Prop({ reflect: true }) type:\n \| 'radio'\n \| 'checkbox'\n \| 'tag'\n \| 'segment'\n \| 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (this.type === 'checkbox' \|\| this.type === 'tag')\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /\n label property that can be used to set the label text. Alternatively you may use a label slot.\n /\n @Prop() label?: string;\n\n /\n If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n /\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /\n This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n /\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n The form element to associate the input with (its form owner). Must be the id of a form.\n /\n @Prop() form?: string \| null;\n\n /\n Emited when the checkbox is toggled\n /\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /\n Emited when the checkbox is focused\n /\n @Event() nanoFocus: EventEmitter;\n\n /\n Emited when the checkbox is blurred\n /\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /\n Returns the native input control\n /\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n /\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /\n Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n /\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /\n Sets focus on the checkbox.\n /\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /\n Removes focus from the checkbox.\n /\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n / Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/nano-demo.js CHANGED Viewed

@@ -215,6 +215,53 @@ const Demo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       ecoOrder: false,
       revenueOrder: false,
     };
+    this.columns = [
+      {
+        title: 'Name',
+        prop: 'name',
+        pinned: 'start',
+        rowHeader: true,
+        autoTooltip: true,
+      },
+      {
+        title: 'Status',
+        prop: 'sku',
+        cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
+      },
+      {
+        title: 'SKU',
+        prop: 'finalSku',
+      },
+      {
+        title: 'Sales tag',
+        prop: 'salesTag',
+        cellTemplate: (_, c) => c.cellModel || 'None',
+      },
+      {
+        title: 'Requested ship date',
+        prop: 'requestedShippingDate',
+        cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
+      },
+      {
+        title: 'Quantity',
+        prop: 'quantity',
+      },
+      {
+        title: 'Unit price',
+        prop: 'price',
+        cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+      },
+      {
+        title: 'Discount %',
+        prop: 'discountPercentage',
+        cellTemplate: (_, c) => c.cellModel || 0,
+      },
+      {
+        title: 'Line value',
+        prop: 'total',
+        cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
+      },
+    ];
   }
   lineItemTotal(order) {
     var _a;
@@ -238,53 +285,7 @@ const Demo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             })) : (h(Fragment, null)),
           ].flat(1);
         },
-      }, columns: [
-        {
-          title: 'Name',
-          prop: 'name',
-          pinned: 'start',
-          rowHeader: true,
-          autoTooltip: true,
-        },
-        {
-          title: 'Status',
-          prop: 'status',
-          cellTemplate: (_, c) => capitalise(c.cellModel || this.order.status),
-        },
-        {
-          title: 'SKU',
-          prop: 'finalSku',
-        },
-        {
-          title: 'Sales tag',
-          prop: 'salesTag',
-          cellTemplate: (_, c) => c.cellModel || 'None',
-        },
-        {
-          title: 'Requested ship date',
-          prop: 'requestedShippingDate',
-          cellTemplate: (_, c) => mediumDate(c.cellModel) || 'N/A',
-        },
-        {
-          title: 'Quantity',
-          prop: 'quantity',
-        },
-        {
-          title: 'Unit price',
-          prop: 'price',
-          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
-        },
-        {
-          title: 'Discount %',
-          prop: 'discountPercentage',
-          cellTemplate: (_, c) => c.cellModel || 0,
-        },
-        {
-          title: 'Line value',
-          prop: 'total',
-          cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),
-        },
-      ], rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
+      }, columns: this.columns, rows: this.order.shopOrderLines, caption: `List of order line items found within order ${this.order.orderId}`, showFooter: true, footRender: {
         pinned: 'bottom',
         template: () => [
           h("tr", null, h("td", { colSpan: 6 }, "\u00A0"), h("th", { scope: "row", class: "tbl__pin nano-tbl__pin--end", colSpan: 3 }, h("div", { class: "nano-tbl__cell-content order-lines__total" }, h("span", { class: "order-lines__total--label" }, "Sub total:"), h("span", { class: "order-lines__total--num" }, currency(this.lineItemTotal(this.order), this.order.currency))))),

package/dist/components/nano-demo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-demo.js","mappings":";;;;;;;;;;;;AAQA,SAAS,UAAU,CAAC,KAAa;EAC/B,IAAI,CAAC,KAAK;IAAE,OAAO,EAAE,CAAC;EACtB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACxD,CAAC;AAED,SAAS,UAAU,CAAC,IAAU;EAC5B,IAAI,CAAC,IAAI;IAAE,OAAO,SAAS,CAAC;EAC5B,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE;IAClD,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,SAAS;GACf,CAAC,CAAC;AACL,CAAC;AAED,SAAS,QAAQ,CAAC,SAAiB,CAAC,EAAE,eAAuB,KAAK;EAChE,YAAY,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,iBAAiB,EAAE,KAAI,KAAK,CAAC;EAC1D,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;IACpC,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,YAAY;GACvB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACpB,CAAC;MAaY,IAAI;EAXjB;;;;IAYU,UAAK,GAAG;MACd,MAAM,EAAE;QACN;UACE,IAAI,EAAE,YAAY;UAClB,WAAW,EAAE,IAAI;UACjB,MAAM,EAAE,UAAU;UAClB,YAAY,EAAE;YACZ,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,oBAAoB;YAC3B,cAAc,EAAE,iBAAiB;YACjC,cAAc,EAAE,kCAAkC;YAClD,gBAAgB,EAAE,OAAO;YACzB,YAAY,EAAE,QAAQ;YACtB,cAAc,EAAE,UAAU;YAC1B,eAAe,EAAE,IAAI;WACtB;UACD,sCAAsC,EAAE;YACtC,KAAK,EAAE;cACL,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,EAAE;cACb,KAAK,EAAE,KAAK;cACZ,cAAc,EAAE,IAAI;aACrB;WACF;UACD,mCAAmC,EAAE;YACnC,KAAK,EAAE;cACL,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,EAAE;cACb,KAAK,EAAE,KAAK;cACZ,cAAc,EAAE,IAAI;aACrB;WACF;UACD,MAAM,EAAE;YACN;cACE,KAAK,EAAE,kBAAkB;cACzB,WAAW,EAAE,kBAAkB;cAC/B,SAAS,EAAE,oBAAoB;cAC/B,MAAM,EAAE,MAAM;aACf;WACF;UACD,mBAAmB,EAAE,EAAE;UACvB,WAAW,EAAE,EAAE;UACf,KAAK,EAAE,EAAE;SACV;OACF;MACD,OAAO,EAAE,UAAU;MACnB,SAAS,EAAE,qBAAqB;MAChC,SAAS,EAAE,qBAAqB;MAChC,MAAM,EAAE,YAAY;MACpB,SAAS,EAAE,IAAI;MACf,QAAQ,EAAE,KAAK;MACf,qBAAqB,EAAE,QAAQ;MAC/B,eAAe,EAAE,MAAM;MACvB,UAAU,EAAE,MAAM;MAClB,wBAAwB,EAAE,IAAI;MAC9B,eAAe,EAAE,eAAe;MAChC,YAAY,EAAE,IAAI;MAClB,YAAY,EAAE,oBAAoB;MAClC,aAAa,EAAE,IAAI;MACnB,oBAAoB,EAAE,SAAS;MAC/B,kBAAkB,EAAE,SAAS;MAC7B,gBAAgB,EAAE,oBAAoB;MACtC,gBAAgB,EAAE,IAAI;MACtB,SAAS,EAAE,qBAAqB;MAChC,SAAS,EAAE,oBAAoB;MAC/B,WAAW,EAAE,MAAM;MACnB,eAAe,EAAE,qBAAqB;MACtC,iBAAiB,EAAE,EAAE;MACrB,aAAa,EAAE,IAAI;MACnB,mBAAmB,EAAE,EAAE;MACvB,KAAK,EAAE,GAAG;MACV,cAAc,EAAE,EAAE;MAClB,SAAS,EAAE,CAAC;MACZ,SAAS,EAAE,IAAI;MACf,mBAAmB,EAAE,cAAc;MACnC,kBAAkB,EAAE,cAAc;MAClC,WAAW,EAAE,IAAI;MACjB,YAAY,EAAE,KAAK;MACnB,mBAAmB,EAAE,oBAAoB;MACzC,gBAAgB,EAAE,IAAI;MACtB,UAAU,EAAE,KAAK;MACjB,gBAAgB,EAAE,QAAQ;MAC1B,iBAAiB,EAAE,oBAAoB;MACvC,wBAAwB,EAAE,SAAS;MACnC,uBAAuB,EAAE,oBAAoB;MAC7C,eAAe,EAAE;QACf,MAAM,EAAE,CAAC,mDAAmD,CAAC;QAC7D,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,IAAI;OAClB;MACD,cAAc,EAAE;QACd,MAAM,EAAE,CAAC,mDAAmD,CAAC;QAC7D,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,UAAU;QAClB,UAAU,EAAE,IAAI;QAChB,WAAW,EAAE,IAAI;OAClB;MACD,cAAc,EAAE;QACd;UACE,IAAI,EAAE,4BAA4B;UAClC,GAAG,EAAE,YAAY;UACjB,QAAQ,EAAE,CAAC;UACX,KAAK,EAAE,GAAG;UACV,KAAK,EAAE,GAAG;UACV,SAAS,EAAE,qBAAqB;UAChC,SAAS,EAAE,qBAAqB;UAChC,OAAO,EAAE,YAAY;UACrB,WAAW,EAAE,QAAQ;UACrB,QAAQ,EAAE,UAAU;UACpB,qBAAqB,EAAE,IAAI;UAC3B,QAAQ,EAAE,CAAC;UACX,kBAAkB,EAAE,CAAC;UACrB,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC;WACjC;UACD,aAAa,EAAE;YACb;cACE,IAAI,EAAE,4BAA4B;cAClC,GAAG,EAAE,aAAa;cAClB,QAAQ,EAAE,EAAE;cACZ,KAAK,EAAE,EAAE;cACT,KAAK,EAAE,GAAG;cACV,SAAS,EAAE,qBAAqB;cAChC,SAAS,EAAE,qBAAqB;cAChC,OAAO,EAAE,YAAY;cACrB,WAAW,EAAE,QAAQ;cACrB,QAAQ,EAAE,UAAU;cACpB,qBAAqB,EAAE,qBAAqB;cAC5C,QAAQ,EAAE,CAAC;cACX,kBAAkB,EAAE,CAAC;aACtB;YACD;cACE,IAAI,EAAE,+BAA+B;cACrC,GAAG,EAAE,YAAY;cACjB,QAAQ,EAAE,CAAC;cACX,KAAK,EAAE,EAAE;cACT,KAAK,EAAE,EAAE;cACT,SAAS,EAAE,qBAAqB;cAChC,SAAS,EAAE,qBAAqB;cAChC,OAAO,EAAE,EAAE;cACX,WAAW,EAAE,QAAQ;cACrB,QAAQ,EAAE,UAAU;cACpB,qBAAqB,EAAE,qBAAqB;cAC5C,QAAQ,EAAE,CAAC;cACX,kBAAkB,EAAE,CAAC;aACtB;WACF;SACF;QACD;UACE,IAAI,EAAE,4BAA4B;UAClC,GAAG,EAAE,SAAS;UACd,QAAQ,EAAE,CAAC;UACX,KAAK,EAAE,EAAE;UACT,KAAK,EAAE,EAAE;UACT,SAAS,EAAE,qBAAqB;UAChC,SAAS,EAAE,qBAAqB;UAChC,OAAO,EAAE,EAAE;UACX,WAAW,EAAE,SAAS;UACtB,QAAQ,EAAE,IAAI;UACd,qBAAqB,EAAE,qBAAqB;UAC5C,QAAQ,EAAE,CAAC;UACX,kBAAkB,EAAE,CAAC;UACrB,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC;WACjC;SACF;OACF;MACD,UAAU,EAAE,EAAE;MACd,WAAW,EAAE,EAAE;MACf,WAAW,EAAE,EAAE;MACf,eAAe,EAAE,EAAE;MACnB,eAAe,EAAE,EAAE;MACnB,QAAQ,EAAE,KAAK;MACf,YAAY,EAAE,KAAK;KACpB,CAAC;GA8IH;EA5IS,aAAa,CAAC,KAAK;;IACzB,IAAI,CAAC,KAAK,IAAI,EAAC,MAAA,KAAK,CAAC,cAAc,0CAAE,MAAM,CAAA;MAAE,OAAO;IACpD,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAAG;MAC/B,IAAI,GAAG,CAAC,MAAM,KAAK,WAAW;QAAE,KAAK,IAAI,GAAG,CAAC,KAAK,CAAC;KACpD,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;GACd;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,kBACE,SAAS,EAAE;QACT,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS;;UACxB,OAAA;YACE,CAAC,CAAC,WAAW;YACb,CAAA,MAAA,CAAC,CAAC,QAAQ,CAAC,aAAa,0CAAE,MAAM,KAC9B,MAAA,CAAC,CAAC,QAAQ,CAAC,aAAa,0CAAE,GAAG,CAAC,CAAC,IAAI;cACjC,QACE,UAAI,KAAK,EAAC,WAAW,IACnB,EAAC,SAAS,IAAC,MAAM,EAAE,IAAI,IAAG,IAAI,CAAC,IAAI,CAAa,EAChD,EAAC,SAAS,QACP,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CACzC,EACZ,EAAC,SAAS,QAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAa,EAC7C,EAAC,SAAS,QAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAa,EAClD,EAAC,SAAS,QACP,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAC7B,CACT,EACL;aACH,CAAC,KAEF,EAAC,QAAQ,OAAG,CACb;WACF,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;SAAA;OACZ,EACD,OAAO,EAAE;QACP;UACE,KAAK,EAAE,MAAM;UACb,IAAI,EAAE,MAAM;UACZ,MAAM,EAAE,OAAO;UACf,SAAS,EAAE,IAAI;UACf,WAAW,EAAE,IAAI;SAClB;QACD;UACE,KAAK,EAAE,QAAQ;UACf,IAAI,EAAE,QAAQ;UACd,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;SAC/C;QACD;UACE,KAAK,EAAE,KAAK;UACZ,IAAI,EAAE,UAAU;SACjB;QACD;UACE,KAAK,EAAE,WAAW;UAClB,IAAI,EAAE,UAAU;UAChB,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,MAAM;SAC9C;QACD;UACE,KAAK,EAAE,qBAAqB;UAC5B,IAAI,EAAE,uBAAuB;UAC7B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,KAAK;SACzD;QACD;UACE,KAAK,EAAE,UAAU;UACjB,IAAI,EAAE,UAAU;SACjB;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,OAAO;UACb,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC7C;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,oBAAoB;UAC1B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,SAAS,IAAI,CAAC;SACzC;QACD;UACE,KAAK,EAAE,YAAY;UACnB,IAAI,EAAE,OAAO;UACb,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KACjB,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;SAC7C;OACF,EACD,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAC/B,OAAO,EAAE,+CAA+C,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,EAC5E,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,MAAM;UACd,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,iBAAkB,EACzD,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CACP,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAC9B,IAAI,CAAC,KAAK,CAAC,QAAQ,CACpB,CACI,CACH,CACH,CACF;UACL,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,uBAEhC,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC/C,CACH,CACH,CACF;UACL,cACE,UAAI,OAAO,EAAE,CAAC,aAAa,EAC3B,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,CAAC,IAC5D,WAAK,KAAK,EAAC,2CAA2C,IACpD,YAAM,KAAK,EAAC,2BAA2B,gCAEhC,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAC3C,CACH,CACH,CACF;SACN;OACF,GACD,CACG,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() \|\| 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order \|\| !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status \|\| this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={[\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'status',\n cellTemplate: (_, c) =>\n capitalise(c.cellModel \|\| this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel \|\| 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) \|\| 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel \|\| 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) =>\n currency(c.cellModel, this.order.currency),\n },\n ]}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-demo.js","mappings":"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","names":[],"sources":["./src/components/demo/demo.tsx"],"sourcesContent":["import {\n Component,\n ComponentInterface,\n Fragment,\n h,\n Host,\n} from '@stencil/core';\nimport { TableTypes } from '../table/table-interface';\n\ndeclare module namespace {\n export interface AccountInfo {\n name: string;\n email: string;\n address_line_1: string;\n address_line_2: string;\n address_postcode: string;\n address_city: string;\n address_region: string;\n address_country: string;\n }\n\n export interface Table {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface IndividualNameComplianceInformation {\n table: Table;\n }\n\n export interface Table2 {\n names: any[];\n addresses: any[];\n match: boolean;\n false_positive?: any;\n }\n\n export interface OrganizationComplianceInformation {\n table: Table2;\n }\n\n export interface Check2 {\n label: string;\n external_id: string;\n item_type: string;\n answer: string;\n }\n\n export interface Check {\n name: string;\n external_id: string;\n status: string;\n account_info: AccountInfo;\n individual_name_compliance_information: IndividualNameComplianceInformation;\n organization_compliance_information: OrganizationComplianceInformation;\n checks: Check2[];\n further_information: any[];\n attachments: any[];\n notes: any[];\n }\n\n export interface DeliveryAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface InvoiceAddress {\n street: string[];\n city: string;\n postcode: string;\n region: string;\n regionCode: string;\n countryCode: string;\n }\n\n export interface IncludedItem {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate: string;\n discount: number;\n discountPercentage: number;\n }\n\n export interface ShopOrderLine {\n name: string;\n sku: string;\n quantity: number;\n price: number;\n total: number;\n createdAt: string;\n updatedAt: string;\n maskSku: string;\n productType: string;\n salesTag: string;\n requestedShippingDate?: string;\n discount: number;\n discountPercentage: number;\n includedItems?: IncludedItem[];\n finalSku: string;\n }\n\n export interface RootObject {\n checks: Check[];\n orderId: string;\n createdAt: string;\n updatedAt: string;\n status: string;\n subStatus?: any;\n currency: string;\n customerPaymentMethod: string;\n paymentPlatform: string;\n dataAreaId: string;\n defaultShippingWarehouse?: any;\n deliveryContact: string;\n deliveryMode?: any;\n deliveryName: string;\n deliveryTerms?: any;\n invoiceAccountNumber: string;\n orderAccountNumber: string;\n orderAccountName: string;\n originalLeadTime?: any;\n salesDate: string;\n salesName: string;\n salesOrigin: string;\n salesOriginName: string;\n customerReference: string;\n purchaseOrder?: any;\n additionalDocuments: any[];\n total: number;\n shippingAmount: number;\n taxAmount: number;\n projectId?: any;\n deliveryPhoneNumber: string;\n invoicePhoneNumber: string;\n quoteNumber?: any;\n customerType: string;\n invoiceAccountEmail: string;\n partnerReference?: any;\n sentToD365: boolean;\n sentToD365Status: string;\n orderAccountEmail: string;\n controllingAccountNumber: string;\n controllingAccountEmail: string;\n deliveryAddress: DeliveryAddress;\n invoiceAddress: InvoiceAddress;\n shopOrderLines: ShopOrderLine[];\n orderLines: any[];\n pickedItems: any[];\n packedItems: any[];\n trackingNumbers: any[];\n trackingUpdates: any[];\n ecoOrder: boolean;\n revenueOrder: boolean;\n }\n}\n\nfunction capitalise(value: string) {\n if (!value) return '';\n return value.charAt(0).toUpperCase() + value.slice(1);\n}\n\nfunction mediumDate(date: Date) {\n if (!date) return undefined;\n return new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n });\n}\n\nfunction currency(amount: number = 0, currencyCode: string = 'USD') {\n currencyCode = currencyCode?.toLocaleUpperCase() \|\| 'USD';\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currencyCode,\n }).format(amount);\n}\n\n@Component({\n tag: 'nano-demo',\n shadow: true,\n styles: /* css */ `\n :host {display: block}\n .child-row {\n opacity: .8;\n font-style: italic;\n }\n `,\n})\nexport class Demo implements ComponentInterface {\n private order: namespace.RootObject = {\n checks: [\n {\n name: 'Compliance',\n external_id: 'CO',\n status: 'complete',\n account_info: {\n name: 'Jeongmin Song',\n email: 'js2957@cornell.edu',\n address_line_1: '930 Campus Road',\n address_line_2: 'Veterinary Medical Center C4 109',\n address_postcode: '14853',\n address_city: 'Ithaca',\n address_region: 'New York',\n address_country: 'US',\n },\n individual_name_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n organization_compliance_information: {\n table: {\n names: [],\n addresses: [],\n match: false,\n false_positive: null,\n },\n },\n checks: [\n {\n label: 'Compliance check',\n external_id: 'compliance_check',\n item_type: 'pass/fail/escalate',\n answer: 'pass',\n },\n ],\n further_information: [],\n attachments: [],\n notes: [],\n },\n ],\n orderId: '00886434',\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T16:02:29',\n status: 'Processing',\n subStatus: null,\n currency: 'USD',\n customerPaymentMethod: 'CC-USD',\n paymentPlatform: 'Shop',\n dataAreaId: 'OXUS',\n defaultShippingWarehouse: null,\n deliveryContact: 'Jeongmin Song',\n deliveryMode: null,\n deliveryName: 'Cornell University',\n deliveryTerms: null,\n invoiceAccountNumber: 'C038330',\n orderAccountNumber: 'C038330',\n orderAccountName: 'Cornell University',\n originalLeadTime: null,\n salesDate: '2022-12-09T15:57:50',\n salesName: 'Cornell University',\n salesOrigin: 'Shop',\n salesOriginName: 'Main USD Store View',\n customerReference: '',\n purchaseOrder: null,\n additionalDocuments: [],\n total: 860,\n shippingAmount: 50,\n taxAmount: 0,\n projectId: null,\n deliveryPhoneNumber: '+16072533722',\n invoicePhoneNumber: '+16072533722',\n quoteNumber: null,\n customerType: 'N/A',\n invoiceAccountEmail: 'js2957@cornell.edu',\n partnerReference: null,\n sentToD365: false,\n sentToD365Status: 'unsent',\n orderAccountEmail: 'js2957@cornell.edu',\n controllingAccountNumber: 'C038330',\n controllingAccountEmail: 'js2957@cornell.edu',\n deliveryAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n invoiceAddress: {\n street: ['930 Campus Road, Veterinary Medical Center C4 109'],\n city: 'Ithaca',\n postcode: '14853',\n region: 'New York',\n regionCode: 'NY',\n countryCode: 'US',\n },\n shopOrderLines: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001',\n quantity: 1,\n price: 810,\n total: 810,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'bundle',\n salesTag: 'FLGExpSP',\n requestedShippingDate: null,\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n includedItems: [\n {\n name: 'Flongle Flow Cell (R9.4.1)',\n sku: 'FLO-FLG001D',\n quantity: 12,\n price: 66,\n total: 792,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: 'FLO-FLG001',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n {\n name: 'Flongle Flow Cell Priming Kit',\n sku: 'EXP-FSE001',\n quantity: 1,\n price: 18,\n total: 18,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'simple',\n salesTag: 'FLGExpSP',\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n },\n ],\n },\n {\n name: 'Carriage - Device shipment',\n sku: 'FREIGHT',\n quantity: 1,\n price: 50,\n total: 50,\n createdAt: '2022-12-09T15:57:50',\n updatedAt: '2022-12-09T15:57:50',\n maskSku: '',\n productType: 'virtual',\n salesTag: null,\n requestedShippingDate: '2022-12-27T00:00:00',\n discount: 0,\n discountPercentage: 0,\n get finalSku() {\n return this.maskSku \|\| this.sku;\n },\n },\n ],\n orderLines: [],\n pickedItems: [],\n packedItems: [],\n trackingNumbers: [],\n trackingUpdates: [],\n ecoOrder: false,\n revenueOrder: false,\n };\n\n private lineItemTotal(order) {\n if (!order \|\| !order.shopOrderLines?.length) return;\n let total = 0;\n order.shopOrderLines.forEach((itm) => {\n if (itm.status !== 'cancelled') total += itm.total;\n });\n return total;\n }\n\n private columns: TableTypes.NanoTable<namespace.ShopOrderLine>['columns'] = [\n {\n title: 'Name',\n prop: 'name',\n pinned: 'start',\n rowHeader: true,\n autoTooltip: true,\n },\n {\n title: 'Status',\n prop: 'sku',\n cellTemplate: (_, c) => capitalise(c.cellModel \|\| this.order.status),\n },\n {\n title: 'SKU',\n prop: 'finalSku',\n },\n {\n title: 'Sales tag',\n prop: 'salesTag',\n cellTemplate: (_, c) => c.cellModel \|\| 'None',\n },\n {\n title: 'Requested ship date',\n prop: 'requestedShippingDate',\n cellTemplate: (_, c) => mediumDate(c.cellModel) \|\| 'N/A',\n },\n {\n title: 'Quantity',\n prop: 'quantity',\n },\n {\n title: 'Unit price',\n prop: 'price',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n {\n title: 'Discount %',\n prop: 'discountPercentage',\n cellTemplate: (_, c) => c.cellModel \|\| 0,\n },\n {\n title: 'Line value',\n prop: 'total',\n cellTemplate: (_, c) => currency(c.cellModel, this.order.currency),\n },\n ];\n\n render() {\n return (\n <Host>\n <nano-table\n rowRender={{\n template: (_, c, TableCell) =>\n [\n c.renderedRow,\n c.rowModel.includedItems?.length ? (\n c.rowModel.includedItems?.map((item) => {\n return (\n <tr class=\"child-row\">\n <TableCell header={true}>{item.name}</TableCell>\n <TableCell>\n {capitalise(c.rowModel.status \|\| this.order.status)}\n </TableCell>\n <TableCell>{capitalise(item.sku)}</TableCell>\n <TableCell>{capitalise(item.salesTag)}</TableCell>\n <TableCell>\n {mediumDate(item.requestedShippingDate)}\n </TableCell>\n </tr>\n );\n })\n ) : (\n <Fragment />\n ),\n ].flat(1),\n }}\n columns={this.columns}\n rows={this.order.shopOrderLines}\n caption={`List of order line items found within order ${this.order.orderId}`}\n showFooter={true}\n footRender={{\n pinned: 'bottom',\n template: () => [\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">Sub total:</span>\n <span class=\"order-lines__total--num\">\n {currency(\n this.lineItemTotal(this.order),\n this.order.currency\n )}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total order tax:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.taxAmount, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n <tr>\n <td colSpan={6}> </td>\n <th scope=\"row\" class=\"tbl__pin nano-tbl__pin--end\" colSpan={3}>\n <div class=\"nano-tbl__cell-content order-lines__total\">\n <span class=\"order-lines__total--label\">\n Total on order placement:\n </span>\n <span class=\"order-lines__total--num\">\n {currency(this.order.total, this.order.currency)}\n </span>\n </div>\n </th>\n </tr>,\n ],\n }}\n />\n </Host>\n );\n }\n}\n"],"version":3}