@nanoporetech-digital/components 1.13.10 → 1.13.14

package/dist/nano-components/p-7e05b617.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"names":["Accordion","[object Object]","event","stopPropagation","getDirectChildren","this","el","querySelectorAll","forEach","item","i","target","open","itemOpened","nanoToggle","emit","h","Host","class","Object","assign","createColorClasses","color"],"mappings":"mIAAA,MCcaA,EAAS,sEAgBpBC,gBAAgBC,GACdA,EAAMC,mBAEMC,EAAkBC,KAAKC,GAAI,iBAAmBD,KAAKC,GAAGC,iBAAiB,iBAC7EC,SAAQ,CAACC,EAA8BC,KACvCD,IAASP,EAAMS,OAAQF,EAAKG,MAAO,EAClCP,KAAKQ,WAAaH,KAEzBL,KAAKS,WAAWC,OAIlBd,gBAAgBC,GACdA,EAAMC,kBACNE,KAAKQ,WAAa,KAClBR,KAAKS,WAAWC,OAGlBd,SACE,OACEe,EAACC,EAAI,CAACC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNC,EAAmBhB,KAAKiB,QAAM,CACjCrB,CAAC,cAAcI,KAAKQ,cAA0C,iBAApBR,KAAKQ,cAC9CG,EAAA,OAAA,OAIPf,uDDzDmB","sourcesContent":[":host {\n  display: block;\n}\n","import { Component, h, Listen, Element, Host, Prop, EventEmitter, Event, State } from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, getDirectChildren } from '../../utils/utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements. \n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items = getDirectChildren(this.el, 'nano-details') || this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i\n    })\n    this.nanoToggle.emit()\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit()\n  }\n\n  render() {\n    return (\n      <Host class={{\n        ...createColorClasses(this.color),\n        [`nano-color-${this.itemOpened}`]: typeof this.itemOpened === 'number'\n      }}><slot /></Host>\n    )\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el)\n  }\n}\n"]}

package/dist/nano-components/p-80049b3d.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-cb5fb88f.system.js"],(function(n){"use strict";var i,t,r,e,o,a;return{setters:[function(n){i=n.k;t=n.r;r=n.h;e=n.e;o=n.g},function(n){a=n.c}],execute:function(){var s;var c=function(){if(!s){var n=window;n.Nanoicons=n.Nanoicons||{};s=n.Nanoicons.map=n.Nanoicons.map||new Map}return s};var l=function(n){var i=d(n.src);if(i){return i}i=u(n.name,n.icon);if(i){return f(i)}if(n.icon){i=d(n.icon);if(i){return i}}return null};var f=function(n){var t=c().get(n);if(t){return t}return i("../node_modules/@fortawesome/fontawesome-pro/svgs/"+n+".svg")};var u=function(n,i){if(!n&&i&&!v(i)){n=i}if(g(n)){n=h(n)}if(!g(n)||n.trim()===""){return null}var t=n.replace(/[a-z]|-|\/|\d/gi,"");if(t!==""){console.warn("invalid characters in icon name "+n);return null}return n};var d=function(n){if(g(n)){n=n.trim();if(v(n)){return n}}return null};var v=function(n){return n.length>0&&/(\/|\.)/.test(n)};var g=function(n){return typeof n==="string"};var h=function(n){return n.toLowerCase()};var m=function(n){if(n){var i=document.createElement("div");i.innerHTML=n;for(var t=i.childNodes.length-1;t>=0;t--){if(i.childNodes[t].nodeName.toLowerCase()!=="svg"){i.removeChild(i.childNodes[t])}}var r=i.firstElementChild;if(r&&r.nodeName.toLowerCase()==="svg"){var e=r.getAttribute("class")||"";r.setAttribute("class",(e+" sc-nano-icon s-nano-icon svg").trim());if(p(r)){return i.innerHTML}}}return""};var p=function(n){if(n.nodeType===1){if(n.nodeName.toLowerCase()==="script"){return false}for(var i=0;i<n.attributes.length;i++){var t=n.attributes[i].value;if(g(t)&&t.toLowerCase().indexOf("on")===0){return false}}for(var i=0;i<n.childNodes.length;i++){if(!p(n.childNodes[i])){return false}}}return true};var b=new Map;var w=new Map;var y=function(n){var i=w.get(n);if(!i){i=fetch(n,{mode:"no-cors"}).then((function(i){if(i.ok){return i.text().then((function(i){b.set(n,m(i))}))}b.set(n,"")}));w.set(n,i)}return i};var x=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--color:var(--nano-color-base, "currentColor");--primary-color:var(--nano-color-tint, "currentColor");--secondary-color:var(--nano-color-shade, "currentColor");--stroke-width:32px;--primary-opacity:.8;--secondary-opacity:1;--icon-size:var(--nano-icon-size, 1em);--icon-margin-top:var(--nano-icon-margin-top, 0);--icon-margin-end:var(--nano-icon-margin-end, 0);--icon-margin-bottom:var(--nano-icon-margin-bottom, 0);--icon-margin-start:var(--nano-icon-margin-start, 0);display:inline-block;width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);min-height:var(--icon-size);contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;color:var(--color);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host .nanoicon{stroke:currentColor}.nanoicon-fill-none{fill:none}.nanoicon-stroke-width{stroke-width:32px;stroke-width:var(--stroke-width)}.icon-inner,.nanoicon,svg,.svg{display:block;height:100%;width:100%;overflow:visible}:host(.loading){opacity:0}.fa-primary{color:var(--primary-color);opacity:var(--primary-opacity, 1)}.fa-secondary{color:var(--secondary-color);opacity:var(--secondary-opacity) !important}:host(.flip-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}';var k=!!document.head.attachShadow;var z=n("nano_icon",function(){function n(n){t(this,n);this.isVisible=false;this.isLoading=true;this.lazy=true}n.prototype.setAriaLabel=function(){if(!this.ariaLabel){var n=u(this.name,this.icon);if(n){this.ariaLabel=n.split("/").slice(-1)[0].replace(/\-/g," ")}}};n.prototype.connectedCallback=function(){var n=this;this.waitUntilVisible(this.el,"50px",(function(){n.isVisible=true;n.loadIcon()}))};n.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};n.prototype.componentWillLoad=function(){this.setAriaLabel()};n.prototype.waitUntilVisible=function(n,i,t){var r=this;if(k&&this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var e=this.io=new window.IntersectionObserver((function(n){if(n[0].isIntersecting||n[1]&&n[1].isIntersecting){e.disconnect();r.io=undefined;t()}}),{rootMargin:i});e.observe(n)}else{t()}};n.prototype.loadIcon=function(){var n=this;if(this.isVisible){var i=l(this);if(i){if(b.has(i)){this.svgContent=b.get(i);this.isLoading=false}else{y(i).then((function(){n.svgContent=b.get(i);n.isLoading=false}))}}}this.setAriaLabel()};n.prototype.render=function(){var n;var i=this.flipRtl||this.name&&(this.name.indexOf("arrow")>-1||this.name.indexOf("chevron")>-1)&&(this.el.ownerDocument.dir==="rtl"&&this.flipRtl!==false);return r(e,{role:"img",class:Object.assign(Object.assign({},a(this.color)),(n={loading:this.isLoading},n["icon-"+this.size]=!!this.size,n["flip-rtl"]=!!i,n))},this.svgContent?r("div",{class:"icon-inner",innerHTML:this.svgContent}):r("div",{class:"icon-inner"}))};Object.defineProperty(n,"assetsDirs",{get:function(){return["../../../node_modules/@fortawesome/fontawesome-pro/svgs"]},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"]}},enumerable:false,configurable:true});return n}());z.style=x}}}));
-//# sourceMappingURL=p-80049b3d.system.entry.js.map

package/dist/nano-components/p-80049b3d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"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"],"names":["CACHED_MAP","getIconMap","win","window","Nanoicons","map","Map","getUrl","i","url","getSrc","src","getName","name","icon","getNamedUrl","iconName","get","getAssetPath","isSrc","isStr","toLower","trim","invalidChars","replace","console","warn","str","length","test","val","toLowerCase","validateContent","svgContent","div","document","createElement","innerHTML","childNodes","nodeName","removeChild","svgElm","firstElementChild","svgClass","getAttribute","setAttribute","isValid","elm","nodeType","attributes","value","indexOf","iconContent","requests","getSvgContent","req","fetch","mode","then","rsp","ok","text","set","iconCss","CANSHADOW","head","attachShadow","Icon","exports","class_1","hostRef","this","isVisible","isLoading","lazy","prototype","setAriaLabel","ariaLabel","label","split","slice","connectedCallback","_this","waitUntilVisible","el","loadIcon","disconnectedCallback","io","disconnect","undefined","componentWillLoad","rootMargin","cb","IntersectionObserver","io_1","data","isIntersecting","observe","url_1","has","render","flipRtl","ownerDocument","dir","h","Host","role","class","Object","assign","createColorClasses","color","_a","loading","size"],"mappings":"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","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\n\nconst getNamedUrl = (iconName: string) => {\n  const url = getIconMap().get(iconName);\n  if (url) {\n    return url;\n  }\n  return getAssetPath(`../node_modules/@fortawesome/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('class', (svgClass + ' sc-nano-icon s-nano-icon svg').trim());\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, {mode: 'no-cors'}).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\n  --stroke-width: 32px;\n  --primary-opacity: .8;\n  --secondary-opacity: 1;\n\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 .3s ease;\n  color: var(--color);\n\n  @include margin(var(--icon-margin-top), var(--icon-margin-end), var(--icon-margin-bottom), var(--icon-margin-start));\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 { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport { testLegacyStyle } from '../../utils/utils';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n  tag: 'nano-icon',\n  assetsDirs: ['../../../node_modules/@fortawesome/fontawesome-pro/svgs'],\n  styleUrl: 'icon.scss',\n  shadow: true\n})\nexport class Icon {\n  private io?: IntersectionObserver;\n\n  @Element() el!: HTMLNanoIconElement;\n\n  @State() private svgContent?: string;\n  @State() private isVisible = false;\n  @State() private isLoading = true;\n\n  /**\n   * Color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Specifies the label to use for accessibility. Defaults to the icon name.\n   */\n  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;\n\n  /**\n   * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n   */\n  @Prop() flipRtl?: boolean;\n\n  /**\n   * Specifies which icon to use from the built-in set of icons.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the exact `src` of an SVG file to use.\n   */\n  @Prop() src?: string;\n\n  /**\n   * A combination of both `name` and `src`. If a `src` url is detected\n   * it will set the `src` property. Otherwise it assumes it's a built-in named\n   * SVG and set the `name` property.\n   */\n  @Prop() icon?: any;\n\n  /**\n   * The size of the icon.\n   * Available options are: `\"small\"` and `\"large\"`.\n   */\n  @Prop() size?: 'small' | 'large';\n\n  /**\n   * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n   * Default, `false`.\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    testLegacyStyle(this.el)\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(el: HTMLElement, rootMargin: string, cb: () => void) {\n    if (Build.isBrowser && CANSHADOW && this.lazy && typeof window !== 'undefined' && (window as any).IntersectionObserver) {\n      const io = this.io = new (window as any).IntersectionObserver((data: IntersectionObserverEntry[]) => {\n        if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n          io.disconnect();\n          this.io = undefined;\n          cb();\n        }\n      }, { rootMargin });\n\n      io.observe(el);\n    } else {\n      // browser doesn't support IntersectionObserver\n      // so just fallback to always show it\n      cb();\n    }\n  }\n\n  @Watch('name')\n  @Watch('src')\n  @Watch('icon')\n  loadIcon() {\n    if (Build.isBrowser && this.isVisible) {\n      const url = getUrl(this);\n      if (url) {\n        if (iconContent.has(url)) {\n          // sync if it's already loaded\n          this.svgContent = iconContent.get(url);\n          this.isLoading = false;\n        } else {\n          // async if it hasn't been loaded\n          getSvgContent(url).then(() => {\n            this.svgContent = iconContent.get(url);\n            this.isLoading = false;\n          });\n        }\n      }\n    }\n    this.setAriaLabel();\n  }\n\n  render() {\n    const flipRtl = this.flipRtl || (this.name && (this.name.indexOf('arrow') > -1 || this.name.indexOf('chevron') > -1) && ((this.el.ownerDocument as Document).dir === 'rtl' && this.flipRtl !== false));\n\n    return (\n      <Host role=\"img\" class={{\n        ...createColorClasses(this.color),\n        'loading': this.isLoading,\n        [`icon-${this.size}`]: !!this.size,\n        'flip-rtl': !!flipRtl\n      }}>{(\n        (Build.isBrowser && this.svgContent)\n          ? <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n          : <div class=\"icon-inner\"></div>\n      )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-8301aa72.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(o,e,t,i){function a(o){return o instanceof t?o:new t((function(e){e(o)}))}return new(t||(t=Promise))((function(t,n){function r(o){try{l(i.next(o))}catch(e){n(e)}}function s(o){try{l(i["throw"](o))}catch(e){n(e)}}function l(o){o.done?t(o.value):a(o.value).then(r,s)}l((i=i.apply(o,e||[])).next())}))};var __generator=this&&this.__generator||function(o,e){var t={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,a,n,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(o){return function(e){return l([o,e])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(t)try{if(i=1,a&&(n=r[0]&2?a["return"]:r[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,r[1])).done)return n;if(a=0,n)r=[r[0]&2,n.value];switch(r[0]){case 0:case 1:n=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;a=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(n=t.trys,n=n.length>0&&n[n.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!n||r[1]>n[0]&&r[1]<n[3])){t.label=r[1];break}if(r[0]===6&&t.label<n[1]){t.label=n[1];n=r;break}if(n&&t.label<n[2]){t.label=n[2];t.ops.push(r);break}if(n[2])t.ops.pop();t.trys.pop();continue}r=e.call(o,t)}catch(s){r=[6,s];a=0}finally{i=n=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-8c6418d2.system.js","./p-ccc72ce4.system.js","./p-1e7fd1f2.system.js","./p-8ca5cd33.system.js","./p-a6dfe69a.system.js","./p-be88c3ef.system.js","./p-7a7ae5a9.system.js","./p-d4454d55.system.js","./p-aae1e5de.system.js"],(function(o){"use strict";var e,t,i,a,n,r,s,l,d,h,c;return{setters:[function(o){e=o.r;t=o.c;i=o.h;a=o.e;n=o.g},function(o){r=o.l;s=o.u},function(o){l=o.M},function(o){d=o.r},function(o){h=o.C},function(o){c=o.h},function(){},function(){},function(){},function(){}],execute:function(){var f=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));--close-button-color:#b5aea7;--width:60rem;--tint-color:#0084a9;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-modal, 700)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--nano-spacing-xlarge, 24px));max-height:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;overflow:auto}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-top:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transform:none;transform:none}.dialog--nodismiss .dialog__panel{-webkit-animation:cannotClose 0.25s ease-in-out 1;animation:cannotClose 0.25s ease-in-out 1}@-webkit-keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}.dialog__header{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:var(--width);width:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-transition:var(--nano-transition-fast, 0.1s) box-shadow;transition:var(--nano-transition-fast, 0.1s) box-shadow}.dialog--visible .dialog__header{min-width:auto}[stuck] .dialog__header{-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding:var(--header-padding-v) var(--header-padding-h)}.dialog .dialog__close-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding:0 var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding:0 var(--body-padding-h) var(--body-padding-v)}.dialog:not(.dialog--has-header) .dialog__body{padding-top:var(--body-padding-v)}.dialog__body ::slotted(*){max-width:100%}.dialog__body-wrap{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{width:100%;padding:var(--footer-padding-v) var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;top:1px}.dialog--visible .dialog__footer{min-width:auto}.dialog__footer ::slotted(button){margin-right:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;padding:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);-webkit-transition:-webkit-box-shadow 100ms ease-in-out;transition:-webkit-box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";var u=0;var p=o("nano_dialog",function(){function o(o){var i=this;e(this,o);this.nanoShow=t(this,"nanoShow",7);this.nanoAfterShow=t(this,"nanoAfterShow",7);this.nanoHide=t(this,"nanoHide",7);this.nanoAfterHide=t(this,"nanoAfterHide",7);this.nanoInitialFocus=t(this,"nanoInitialFocus",7);this.nanoRequestClose=t(this,"nanoRequestClose",7);this.componentId="dialog-"+ ++u;this.willShow=false;this.willHide=false;this.addedTransEnd=false;this.isVisible=false;this.noDismiss=false;this.hasFooter=false;this.showRibbon=true;this.open=false;this.label="";this.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeMethod="url-hash";this.handleKeyDown=function(o){if(o.key==="Escape"){i.requestClose()}};this.requestClose=function(){var o=i.nanoRequestClose.emit();if(!o.defaultPrevented&&!i.noUserDismiss){i.hide()}else{i.noDismiss=true;setTimeout((function(o){return i.noDismiss=false}),250)}};this.handleTransitionEnd=function(o){if(o.propertyName==="opacity"&&o.composedPath().find((function(o){return o===i.panel||o===i.overlay}))){i.isVisible=i.open;i.willShow=false;i.willHide=false;i.open?i.nanoAfterShow.emit():i.nanoAfterHide.emit()}};this.handleSlotChange=function(){i.hasFooter=c(i.host,"footer")}}o.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};o.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var o;var e=this;return __generator(this,(function(t){if(this.willShow){return[2]}o=this.nanoShow.emit();if(o.defaultPrevented){this.open=false;return[2]}this.originalTrigger=document.activeElement;this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();r(this.host);if(this.open){d((function(){var o=e.nanoInitialFocus.emit();if(!o.defaultPrevented){e.panel.focus({preventScroll:true})}}))}return[2]}))}))};o.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var o,e;return __generator(this,(function(t){if(this.willHide){return[2]}o=this.nanoHide.emit();if(o.defaultPrevented){this.open=true;return[2]}this.willHide=true;this.open=false;this.modal.deactivate();s(this.host);this.stopVideos();e=this.originalTrigger;if(e&&typeof e.focus==="function"){setTimeout((function(){return e.focus()}))}return[2]}))}))};o.prototype.stopVideos=function(){var o=Array.from(this.host.querySelectorAll("iframe,video"));o.forEach((function(o){if(o.tagName.toLowerCase()==="video")o.pause();else{var e=o.src;o.src=e}}))};o.prototype.connectedCallback=function(){this.modal=new l(this.host);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};o.prototype.componentWillLoad=function(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)h.init(this,["open"],this.storeMethod,this.storeId)};o.prototype.componentDidLoad=function(){if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};o.prototype.disconnectedCallback=function(){s(this.host);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)};o.prototype.render=function(){var o=this;return i(a,{showing:this.isVisible?true:undefined},i("div",{part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown},i("div",{part:"overlay",class:"dialog__overlay",ref:function(e){return o.overlay=e},onClick:this.requestClose}),i("div",{ref:function(e){return o.panel=e},part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?this.componentId+"-title":null,tabIndex:0},i("div",{class:"dialog__body-wrap"},!this.noHeader&&i("nano-sticker",null,i("header",{part:"header",class:"dialog__header"},i("span",{part:"title",class:"dialog__title",id:this.componentId+"-title"},i("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&i("nano-icon-button",{exportparts:"base:close-button",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),i("div",{part:"body",class:"dialog__body"},i("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&i("nano-sticker",{position:"bottom"},i("footer",{part:"footer",class:"dialog__footer"},i("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&i("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))};Object.defineProperty(o.prototype,"host",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(o,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return o}());p.style=f}}}));
-//# sourceMappingURL=p-8301aa72.system.entry.js.map

package/dist/nano-components/p-8301aa72.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","exports","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","label","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","raf","nanoInitialFocus","focus","preventScroll","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","addEventListener","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@import \"../../global/style/nano-theme/base\";\n@import \"../../global/style/nano-theme/colours\";\n@import \"../../global/style/nano-theme/layers\";\n@import \"../../global/style/nano-theme/form\";\n\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to  #{$color-celsius};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{$color-mediumgrey};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{$color-blue};\n * @prop --width: defaults to 31rem;\n */\n:host {\n  --border-radius: #{$layer-border-radius};\n  --content-background: #fafafa;\n  --footer-content: #{$color-lightgrey};\n  --scrim-color: #{$layer-overlay-dark};\n  --box-shadow: #{$layer-shadow-large};\n  --close-button-color: #{$color-palegrey};\n  --width: 60rem;\n  --tint-color: #{$color-blue};\n\n  --body-padding-v: #{$spacing-large};\n  --body-padding-h: #{$spacing-large};\n\n  --header-padding-v: #{$spacing-medium};\n  --header-padding-h: #{$spacing-large};\n\n  --footer-padding-v: #{$spacing-medium};\n  --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n  $self: &;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-modal};\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n\n  &__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - #{$spacing-xlarge});\n    max-height: calc(92% - #{$spacing-xlarge});\n    background-color: var(--content-background);\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transform: scale(0.8);\n    transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n    overflow: auto;\n\n    &:focus {\n      outline: none;\n    }\n\n    .dialog--with-ribbon & {\n      border-top: 5px solid var(--tint-color);\n    }\n\n    .dialog--open & {\n      display: flex;\n      opacity: 1;\n      transform: none;\n    }\n\n    .dialog--nodismiss & {\n      animation: cannotClose .25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n        50% {\n          transform: scale(1.08);\n        }\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n\n  &__header {\n    flex: 0 0 auto;\n    display: flex;\n    min-width: var(--width);\n    width: 100%;\n    background-color: var(--content-background);\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    transition: #{$transition-xfast} box-shadow;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    [stuck] & {\n      box-shadow: #{$layer-shadow-medium};\n    }\n  }\n\n  &__title {\n    flex: 1 1 auto;\n    font-size: #{$fontsize-large};\n    line-height: 1.6;\n    padding: var(--header-padding-v) var(--header-padding-h);\n  }\n\n  & &__close-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{$fontsize-xlarge};\n    padding: 0 var(--header-padding-h);\n    --color: var(--close-button-color);\n  }\n\n  &__body {\n    padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n    .dialog:not(.dialog--has-header) & {\n      padding-top: var(--body-padding-v);\n    }\n\n    & ::slotted(*) {\n      max-width: 100%;\n    }\n\n    &-wrap {\n      flex: 1 1 auto;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: var(--border-radius);\n\n      .dialog:not(.dialog--has-header) & {\n        border-radius: 0 0 inherit inherit;\n      }\n\n      .dialog:not(.dialog--has-footer) & {\n        border-radius: inherit inherit 0 0;\n      }\n    }\n  }\n\n  &__footer {\n    width: 100%;\n    padding: var(--footer-padding-v) var(--footer-padding-h);\n    background: var(--footer-content);\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    position: relative;\n    top: 1px;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    ::slotted(button) {\n      margin-right: #{$spacing-small} !important;\n    }\n\n    .dialog:not(.dialog--has-footer) & {\n      display: none;\n    }\n  }\n\n  &__close-txt {\n    color: var(--tint-color);\n    border: none;\n    text-decoration: underline;\n    margin: 0;\n    padding: 0;\n    text-underline-offset: 4px;\n    background-color: transparent;\n    font: inherit;\n    -webkit-box-align: center;\n    cursor: pointer;\n    font-size: #{$fontsize-small};\n    padding: .5rem;\n    border-radius: #{$border-radius-small};\n    transition: box-shadow 100ms ease-in-out;\n\n    &:focus {\n      outline: none;\n      box-shadow: #{$control-focus-style};\n    }\n  }\n\n  &__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--scrim-color);\n    opacity: 0;\n    transition: #{$transition-fast} opacity;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n\n    .dialog--open & {\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h, Host, ComponentInterface } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot, raf } from '../../utils/utils';\nimport { ComponentStore, StorageMethods } from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label = '';\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n   @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      raf(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n        if (!nanoInitialFocus.defaultPrevented) {\n          this.panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  }\n\n  private requestClose = () =>  {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout(_ => this.noDismiss = false, 250);\n    }\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.propertyName === 'opacity' && event.composedPath().find((node) => node === this.panel || node === this.overlay)) {\n    // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  }\n\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(this.host.querySelectorAll('iframe,video'));\n    videos.forEach(video => {\n      if (video.tagName.toLowerCase() === 'video') (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  };\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId) ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div part=\"overlay\" class=\"dialog__overlay\" ref={el => this.overlay = el} onClick={this.requestClose} />\n\n          <div\n            ref={el => this.panel = el}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader &&\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss &&\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    }\n                  </header>\n                </nano-sticker>\n              }\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {(!this.noFooter && (this.hasFooter || !this.noUserDismiss)) &&\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss &&\n                      <button class=\"dialog__close-txt\" onClick={this.requestClose}>Close</button>\n                    }\n                  </footer>\n                </nano-sticker>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-83c624bd.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-1e7fd1f2.system.js"],(function(t){"use strict";var o,e,r,i;return{setters:[function(t){o=t.r;e=t.h;r=t.g},function(t){i=t.h}],execute:function(){var n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:.25;--scrim-opacity-to:.7;--padding:0;color:var(--theme-color)}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#ffffff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var s=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!i(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":t,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)]))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());s.style=n}}}));
-//# sourceMappingURL=p-83c624bd.system.entry.js.map

package/dist/nano-components/p-83c624bd.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","hasQuote","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@import \"../../global/style/utilities/globals\";\n@import \"../../global/style/nano-theme/colours\";\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: .25;\n  --scrim-opacity-to: .7;\n  --padding: 0;\n\n  color: var(--theme-color);\n}\n\n:host([theme=\"light\"]) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: .25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n  &__bg-wrap {\n    overflow: hidden;\n  }\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot=\"secondary-ctas\"]),\n    &::slotted(a.button[slot=\"secondary-ctas\"]) {\n      padding: .25rem .5rem !important;\n      font-size: .875rem !important;\n      margin: 0 .25rem !important;\n    }\n  }\n  &__img {\n    display: block;\n    --padding: inherit;\n  }\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot=\"breadcrumb\"]),\n    &::slotted(*[slot=\"breadcrumb\"]) {\n      font-size: .85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n    ::slotted(a[slot=\"breadcrumb\"]),\n    &::slotted(a[slot=\"breadcrumb\"]) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n    ::slotted(.slash[slot=\"breadcrumb\"]),\n    &::slotted(.slash[slot=\"breadcrumb\"]) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 .5rem;\n      display: inline-block;\n    }\n  }\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background: linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%);\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n  &__content {\n    max-width: 1440px;\n    --grid-row-gap: 0;\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot=\"back-btn\"]),\n    &::slotted(nano-icon-button[slot=\"back-btn\"]) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot=\"back-btn\"]),\n      &::slotted(nano-icon-button[slot=\"back-btn\"]) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n  &__primary-content {\n    max-width: 45rem;\n    --color: #ffffff;\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot=\"primary-content\"]),\n    &::slotted(h1[slot=\"primary-content\"]) {\n      line-height: 26px!important;\n      margin-top: 0!important;\n      margin-bottom:18px!important;\n      font-size: 2rem!important;\n    }\n    .is-xl & {\n      ::slotted(h1[slot=\"primary-content\"]),\n      &::slotted(h1[slot=\"primary-content\"]) {\n        line-height: 31px!important;\n        margin-bottom: 30px!important;\n      }\n      ::slotted(.button[slot=\"primary-content\"]),\n      &::slotted(.button[slot=\"primary-content\"]) {\n        margin-top: 20px!important;\n      }\n    }\n\n  }\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot=\"icon-box-item\"] nano-icon) {\n      color: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n    ::slotted([slot=\"icon-box-item\"]) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: .8125rem;\n      margin-bottom: 20px;\n    }\n    ::slotted(.last[slot=\"icon-box-item\"]),\n    &::slotted(.last[slot=\"icon-box-item\"]) {\n      margin-bottom: 0;\n    }\n  }\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n  &__quote {\n    &::before, &::after {\n      content: '\"';\n      font-size: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n    ::slotted([slot=\"quote\"]),\n    &::slotted([slot=\"quote\"]) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\n    }\n  }\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: .8;\n  }\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n      ::slotted(.button[slot=\"primary-content\"]),\n      &::slotted(.button[slot=\"primary-content\"]) {\n        margin-top: 8px!important;\n      }\n      ::slotted(h1[slot=\"primary-content\"]),\n      &::slotted(h1[slot=\"primary-content\"]) {\n        margin-bottom: 18px!important;\n      }\n    }\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","\nimport { Component, Prop, h, ComponentInterface, VNode, State, Element, Watch } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils'\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs.filter(crumb => (\n      crumb.tagName === 'A' &&\n      !crumb.nextElementSibling.classList.contains('slash')\n    )).forEach(crumb => {\n      crumb.insertAdjacentHTML('afterend', '<span slot=\"breadcrumb\" class=\"slash\">/</span>')\n    })\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach(item => item.classList.remove('last'));\n    if (this.iconBoxItems[this.iconBoxItems.length - 1] && this.iconBoxItems[this.iconBoxItems.length - 1].classList)\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark'\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top'\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = this.mo = new MutationObserver(() => this.processSlottedContent())\n    mo.observe(this.host, { childList: true })\n  }\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(this.host.querySelectorAll('[slot=\"icon-box-item\"]'));\n    this.hasIconBox = !!this.host.querySelector('[slot=\"icon-box\"]') || !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(this.host.querySelectorAll('[slot=\"breadcrumb\"]'));\n    this.hasSecondaryContent = !!this.host.querySelector('[slot=\"icon-box\"]') || !!this.host.querySelector('[slot=\"quote\"]') || !!this.host.querySelector('[slot=\"icon-box-item\"]') || !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg = !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? <div class=\"hero__ctas\"><slot name=\"secondary-ctas\" /></div> : '',\n      <div class=\"hero__scrim\"><slot name=\"scrim\" /></div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item gridStates={this.hasSecondaryContent ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2' : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'}>\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {(this.hasSecondaryContent) &&\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {(this.hasIconBox) &&\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              }\n              {(this.hasQuote) &&\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              }\n            </div>\n          </nano-grid-item>\n        }\n      </nano-grid>\n    ];\n  }\n\n  render() {\n    const rtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <div class={{\n        hero: true,\n        'hero--light': this.theme === 'light',\n        'hero--secondary': this.hasSecondaryContent,\n        'hero--iconbox': this.hasIconBox,\n        'hero--rtl': rtl,\n        'hero--scrim': this.hasScrim,\n        'hero--legacy': this.isLegacy,\n        'hero--breadcrumb': !!this.breadCrumbs.length,\n        'hero--hasbg': this.hasBg,\n        'hero--backbtn': this.hasBackBtn,\n        'hero--sub': this.level === 'sub',\n      }}>\n        <div class=\"hero__bg-wrap\">\n          {(!!this.imgSrc) &&\n            <nano-img class=\"hero__img\" lazy={false} background srcSet={this.imgSrcSet} src={this.imgSrc}>\n              <this.HeroContent />\n            </nano-img>\n          }\n          {(!this.imgSrc) && [\n            <div class=\"hero__bg-slot\">\n              <slot name=\"background\" />\n            </div>,\n            <this.HeroContent />\n          ]}\n        </div>\n      </div>\n    )\n  }\n}\n"]}

package/dist/nano-components/p-8407e325.system.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js"],(function(e){"use strict";var t;return{setters:[function(e){t=e.g}],execute:function(){e("S",void 0);var n=function(){var e;var t=new Promise((function(t){e=t}));return{promise:t,resolve:e}};var r=function(e,r){var i=e.prototype;var o=i.componentWillLoad;i.componentWillLoad=function(){var e=this;var i=t(this);var u=n();var a=new CustomEvent("openWormhole",{bubbles:true,composed:true,detail:{consumer:this,fields:r,updater:function(t,n){e[t]=n},onOpen:u}});i.dispatchEvent(a);return u.promise.then((function(){if(o){return o.call(e)}}))}};var i;(function(e){e["Filter"]="filter";e["Page"]="page";e["Replica"]="replica";e["Init"]="init"})(i||(i=e("S",{})));var o=e("W",(function(e,t){return r(e,t)}))}}}));
-//# sourceMappingURL=p-8407e325.system.js.map

package/dist/nano-components/p-8407e325.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/stencil-wormhole/dist/esm/deferred.js","node_modules/stencil-wormhole/dist/esm/consumer.js","src/components/algolia/algolia-data.tsx"],"names":["createDeferredPromise","resolve","promise","Promise","res","openWormhole","Component","props","ComponentPrototype","prototype","componentWillLoad","_this","this","el","getElement","onOpen","event","CustomEvent","bubbles","composed","detail","consumer","fields","updater","prop","value","dispatchEvent","then","call","SearchChangeEvent","exports","Wormhole"],"mappings":"gJAAO,IAAIA,EAAwB,WAC/B,IAAIC,EACJ,IAAIC,EAAU,IAAIC,SAAQ,SAAUC,GAAOH,EAAUG,KACrD,MAAO,CAAEF,QAASA,EAASD,QAASA,ICDjC,IAAII,EAAe,SAAUC,EAAWC,GAC3C,IAAIC,EAAqBF,EAAUG,UACnC,IAAIC,EAAoBF,EAAmBE,kBAC3CF,EAAmBE,kBAAoB,WACnC,IAAIC,EAAQC,KACZ,IAAIC,EAAKC,EAAWF,MACpB,IAAIG,EAASf,IACb,IAAIgB,EAAQ,IAAIC,YAAY,eAAgB,CACxCC,QAAS,KACTC,SAAU,KACVC,OAAQ,CACJC,SAAUT,KACVU,OAAQf,EACRgB,QAAS,SAAUC,EAAMC,GAASd,EAAMa,GAAQC,GAChDV,OAAQA,KAGhBF,EAAGa,cAAcV,GACjB,OAAOD,EAAOb,QAAQyB,MAAK,WACvB,GAAIjB,EAAmB,CACnB,OAAOA,EAAkBkB,KAAKjB,aCjBlCkB,GAAZ,SAAYA,GAAoBA,EAAA,UAAA,SAAmBA,EAAA,QAAA,OAAeA,EAAA,WAAA,UAAqBA,EAAA,QAAA,QAAvF,CAAYA,IAAAA,EAAiBC,EAAA,IAAA,UAqBhBC,EAAQD,EAAA,KAAG,SACtBxB,EACAC,GACG,OAAAF,EAAaC,EAAWC","sourcesContent":["export var createDeferredPromise = function () {\n    var resolve;\n    var promise = new Promise(function (res) { resolve = res; });\n    return { promise: promise, resolve: resolve };\n};\n","import { getElement } from \"@stencil/core\";\nimport { createDeferredPromise } from \"./deferred\";\nexport var openWormhole = function (Component, props) {\n    var ComponentPrototype = Component.prototype;\n    var componentWillLoad = ComponentPrototype.componentWillLoad;\n    ComponentPrototype.componentWillLoad = function () {\n        var _this = this;\n        var el = getElement(this);\n        var onOpen = createDeferredPromise();\n        var event = new CustomEvent('openWormhole', {\n            bubbles: true,\n            composed: true,\n            detail: {\n                consumer: this,\n                fields: props,\n                updater: function (prop, value) { _this[prop] = value; },\n                onOpen: onOpen,\n            },\n        });\n        el.dispatchEvent(event);\n        return onOpen.promise.then(function () {\n            if (componentWillLoad) {\n                return componentWillLoad.call(_this);\n            }\n        });\n    };\n};\n","import { openWormhole, WormholeConsumerConstructor } from 'stencil-wormhole'\nimport { SearchIndex as AlgoliaIndex } from 'algoliasearch';\nimport { IndexResult, AlgoliaResultHit, SearchIndex } from '../../interface';\nimport { StorageMethods } from '../../utils/store/component-store';\n\nexport enum SearchChangeEvent { Filter = 'filter', Page = 'page', Replica = 'replica', Init = 'init' }\n\nexport interface WormholeState {\n  indexResults: IndexResult;\n  filterChanged?: string;\n  facets?: & {\n    [prop: string]: & {\n      [prop: string]: number;\n    };\n  },\n  results: AlgoliaResultHit[];\n  resultsPage: number;\n  tplRenderFn?: (...args: any[]) => string;\n  changeEvent: SearchChangeEvent;\n  algoliaIndex: AlgoliaIndex;\n  searchIndex: SearchIndex;\n  browseIndex: boolean;\n  globalStoreMethod: StorageMethods;\n  isLoading: boolean;\n}\n\nexport const Wormhole = (\n  Component: WormholeConsumerConstructor,\n  props: (keyof WormholeState)[]\n) => openWormhole(Component, props);\n\nexport * from 'stencil-wormhole';\n"]}

package/dist/nano-components/p-87d39eb4.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js"],(function(n){"use strict";var e,t,a;return{setters:[function(n){e=n.r;t=n.h;a=n.g}],execute:function(){var r=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block;--base-color-rgb:var(--nano-spinner-base-rgb, 0, 132, 169);--indicator-color:var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1));--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), .2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;top:0;left:0;right:0;bottom:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;width:1em;height:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);border-left-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding:0 0.625em;height:4.375em;width:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;top:1.875em;left:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);width:0.0625em;width:max(.0625em, 1px);height:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;width:0.5em;height:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;left:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;margin-top:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}';var i=n("nano_spinner",function(){function n(n){e(this,n);this.hasText=false;this.type="dna";this.overlay=false}n.prototype.componentWillLoad=function(){this.hasText=!!this.el.childNodes.length};n.prototype.render=function(){return t("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},t("div",{class:"spinner__loader"},this.type==="dna"&&t("div",{class:"spinner__dna"},t("div",{class:"spinner__dnatrack spinner__dnatrack--1"},t("div",{class:"spinner__dnadot spinner__dnadot--1"}),t("div",{class:"spinner__dnadot spinner__dnadot--2"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--2"},t("div",{class:"spinner__dnadot spinner__dnadot--3"}),t("div",{class:"spinner__dnadot spinner__dnadot--4"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--3"},t("div",{class:"spinner__dnadot spinner__dnadot--5"}),t("div",{class:"spinner__dnadot spinner__dnadot--6"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--4"},t("div",{class:"spinner__dnadot spinner__dnadot--7"}),t("div",{class:"spinner__dnadot spinner__dnadot--8"})),t("div",{class:"spinner__dnatrack spinner__dnatrack--5"},t("div",{class:"spinner__dnadot spinner__dnadot--9"}),t("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&t("span",{class:"spinner__spin"})),this.hasText&&t("div",{class:"spinner__text"},t("slot",null)),this.overlay&&t("div",{class:"spinner__overlay"}))};Object.defineProperty(n.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return n}());i.style=r}}}));
-//# sourceMappingURL=p-87d39eb4.system.entry.js.map

package/dist/nano-components/p-87d39eb4.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","exports","class_1","hostRef","this","hasText","type","overlay","prototype","componentWillLoad","el","childNodes","length","render","h","class","aria-busy","aria-live"],"mappings":"kJAAA,IAAMA,EAAa,ilMCWNC,EAAOC,EAAA,eAAA,WALpB,SAAAC,EAAAC,aAOWC,KAAAC,QAAmB,MAGpBD,KAAAE,KAAyB,MAGVF,KAAAG,QAAmB,MAE1CL,EAAAM,UAAAC,kBAAA,WACEL,KAAKC,UAAYD,KAAKM,GAAGC,WAAWC,QAGtCV,EAAAM,UAAAK,OAAA,WACE,OACEC,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC7CH,EAAA,MAAA,CAAKC,MAAM,mBACRX,KAAKE,OAAS,OACdQ,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIfX,KAAKE,OAAS,UACdQ,EAAA,OAAA,CAAMC,MAAM,mBAGdX,KAAY,SACZU,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGFV,KAAY,SACZU,EAAA,MAAA,CAAKC,MAAM,4IApDD","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$spinner-color-rgb}\n   * @prop --indicator-color: default var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1))\n   * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), .2))\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{$spinner-color-rgb};\n  --indicator-color: var(--nano-spinner-indicator-color, rgba(var(--base-color-rgb), 1));\n  --track-color:  var(--nano-track-color, rgba(var(--base-color-rgb), .2));\n  --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay=\"false\"])) & {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  :host([overlay]:not([overlay=\"false\"])) & {\n    .spinner__loader, .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    width: 1em;\n    height: 1em;\n    border-radius: 50%;\n    border: solid .1em var(--track-color);\n    border-top-color: var(--indicator-color);\n    border-right-color: var(--indicator-color);\n    border-left-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: .2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding: 0 .625em;\n    height: 4.375em;\n    width: .625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 1.875em;\n      left: 50%;\n      transform: translateX(-50%) translateZ(0);\n      width: .0625em;\n      width: #{'max(.0625em, 1px)'};\n      height: .625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    width: .5em;\n    height: .5em;\n    border-radius: 50% 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    left: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-top: .5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%, 100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    } 25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    } 50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    } 75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%, 100% {\n      transform: translateX(-50%) scaleY(5);\n    } 25% {\n      transform: translateX(-50%) scaleY(1);\n    } 50% {\n      transform: translateX(-50%) scaleY(5);\n    } 75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import { Component, h, ComponentInterface, Prop, Element, State } from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: Element;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({reflect: true}) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n         <div class=\"spinner__loader\">\n          {(this.type === 'dna') &&\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          }\n          {(this.type === 'circle') &&\n            <span class=\"spinner__spin\"></span>\n          }\n        </div>\n        {(this.hasText) &&\n          <div class=\"spinner__text\">\n            <slot />\n          </div>\n        }\n        {(this.overlay) &&\n          <div class=\"spinner__overlay\"></div>\n        }\n    </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-88c02a32.system.entry.js

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-8407e325.system.js","./p-8ca5cd33.system.js","./p-d4454d55.system.js","./p-aae1e5de.system.js"],(function(e){"use strict";var t,i,n,l,s,r,a,o;return{setters:[function(e){t=e.r;i=e.c;n=e.f;l=e.h;s=e.e;r=e.g},function(e){a=e.W},function(e){o=e.C},function(){},function(){}],execute:function(){var h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:none}:host ::slotted([slot=filter-template]),:host::slotted([slot=filter-template]){display:none !important}:host(.show-filter){display:block}";var u=e("nano_algolia_filter",function(){function e(e){var n=this;t(this,e);this.nanoFilterChanged=i(this,"nanoFilterChanged",7);this.nanoTplUpdated=i(this,"nanoTplUpdated",7);this.filterId=null;this.tplWillRnder=new Promise((function(e){n.tplDidRnder=e}));this.internalValue=[undefined];this.showFilter=false;this.indexResults=null;this.filterChanged=null;this.filterName=null;this.value="";this.operator="or";this.storeMethod="session";this.handleChangeEvent=function(){var e=n.getFieldValues();if(n.didValueChange(e)){n.internalValue=e;return true}return false}}e.prototype.valueSet=function(){var e=this;var t=this.value;var i;if(typeof t==="string")i=t.length?t.split("|"):[];else i=this.value;if(this.didValueChange(i)){var n=this.setFieldValues(i);if(n&&n.length)this.internalValue=i;else{this.tplWillRnder.then((function(t){e.setFieldValues(i);e.internalValue=i}))}}};e.prototype.valueChanged=function(){this.value=this.internalValue;this.nanoFilterChanged.emit({filterId:this.filterId,facetName:this.filterName,value:this.internalValue,operator:this.operator})};e.prototype.viewFilterChange=function(){if(this.showFilter)this.attachChangeListener();else this.attachChangeListener(false)};e.prototype.appliedFilterChanged=function(){if(this.filterName&&this.filterChanged&&(this.filterChanged!==this.filterId||this.operator==="and")){this.updateContent()}};e.prototype.tplUpdate=function(){this.updateContent()};e.prototype.handleFilterChange=function(){var e=this;if(this.indexResults&&this.indexResults.appliedFilters){var t=this.indexResults.appliedFilters.find((function(t){return t.name===e.filterName}));if(!t)return;this.tplWillRnder.then((function(i){var n=e.setFieldValues(t.values);if(n&&n.length)e.value=n}))}this.updateContent()};e.prototype.updateContent=function(){var e=this;var t=this.outputSlot||this.outputEle;if(!this.el)return;if(!this.templateStr)this.showFilter=true;else if(!this.filterName||!t||this.templateStr&&(!this.indexResults||!this.indexResults.origFilters[this.filterName])){this.showFilter=false}if(!t)return;if(!this.indexResults){if(this.templateStr){n((function(){t.innerHTML=e.tplRenderFn(e.templateStr,{orig:{},dyn:{},selected:e.internalValue&&e.internalValue.length?e.internalValue:e.value});if(!e.value||!e.value.length)e.handleChangeEvent()}))}else if(!this.value||!this.value.length)this.handleChangeEvent();return}n((function(){t.innerHTML=e.tplRenderFn(e.templateStr,{orig:Object.assign({},e.indexResults.origFilters[e.filterName]),dyn:Object.assign({},e.indexResults.dynFilters[e.filterName]),selected:e.internalValue&&e.internalValue.length?e.internalValue:e.value});e.tplDidRnder();e.setFieldValues();if(!e.showFilter)e.showFilter=true;e.nanoTplUpdated.emit(e.el)}))};e.prototype.getFieldValues=function(){var e=[];var t=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select');for(var i=0;i<t.length;i++){var n=t[i];if(n.type==="select-multiple"){var l=n;for(var s=0;s<l.options.length;s++){if(!l.options[s].selected||!l.options[s].value.length)continue;e.push(l.options[s].value)}}else if(n.type!=="checkbox"&&n.type!=="radio"||n.checked&&n.value.length){e.push(n.value)}}return e};e.prototype.setFieldValues=function(e){e=e||this.internalValue;if(!e)return;var t=[];var i=this.outputSlot.querySelectorAll('input[type="checkbox"], input[type="radio"], select, nano-select, nano-checkbox');for(var n=0;n<i.length;n++){var l=i[n];if(l.disabled||l.type==="file"||l.type==="reset"||l.type==="submit"||l.type==="button")continue;if(l.type==="select-multiple"||l.type==="select-one"){var s=l;for(var r=0;r<s.options.length;r++){if(!e.includes(s.options[r].value))s.options[r].selected=false;else{t.push(s.value);s.options[r].selected=true;if(l.type==="select-one")s.value=s.options[r].value}}}else if(["checkbox","radio","tag","segment","segment-pill"].includes(l.type)){if(e.includes(l.value)){t.push(l.value);l.checked=true}else if(!e.length&&!l.value.length){l.checked=true}else l.checked=false}}return t};e.prototype.didValueChange=function(e){if(!!this.internalValue&&!e)return true;if(!this.internalValue&&!e)return false;if(this.internalValue&&e.length!==this.internalValue.length)return true;var t=false;for(var i=0;i<e.length;i++){if(!t&&(!this.internalValue||!this.internalValue.includes(e[i])))t=true}return t};e.prototype.attachChangeListener=function(e){if(e===void 0){e=true}if(!this.outputSlot)return;if(e){this.outputSlot.addEventListener("change",this.handleChangeEvent);this.outputSlot.addEventListener("nanoChange",this.handleChangeEvent)}else{this.outputSlot.removeEventListener("change",this.handleChangeEvent);this.outputSlot.removeEventListener("nanoChange",this.handleChangeEvent)}};e.prototype.connectedCallback=function(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');this.filterId=this.filterName+"_"+p++;if(!!this.templateSlot){this.templateStr=this.templateSlot.innerHTML;this.templateStr=this.templateStr.replace(/=&gt;/gm,"=>")}};e.prototype.componentWillLoad=function(){if(this.storeId)o.init(this,["value"],this.storeMethod||this.globalStoreMethod,this.storeId)};e.prototype.componentDidLoad=function(){this.updateContent();if(this.templateStr&&this.filterName&&this.indexResults&&this.indexResults.origFilters[this.filterName])this.showFilter=true};e.prototype.render=function(){var e=this;return l(s,{class:{"show-filter":this.showFilter}},l("div",{ref:function(t){return e.outputEle=t}},l("slot",{name:"output"})))};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueSet"],internalValue:["valueChanged"],showFilter:["viewFilterChange"],facets:["appliedFilterChanged"],tplRenderFn:["tplUpdate"],indexResults:["handleFilterChange"]}},enumerable:false,configurable:true});return e}());a(u,["globalStoreMethod","indexResults","filterChanged","facets","tplRenderFn","changeEvent"]);var p=0;u.style=h}}}));
-//# sourceMappingURL=p-88c02a32.system.entry.js.map

package/dist/nano-components/p-88c02a32.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"names":["algoliaFilterCss","AlgoliaFilter","exports","class_1","hostRef","_this","this","filterId","tplWillRnder","Promise","resolve","tplDidRnder","internalValue","undefined","showFilter","indexResults","filterChanged","filterName","value","operator","storeMethod","handleChangeEvent","vals","getFieldValues","didValueChange","prototype","valueSet","valStr","length","split","foundVals","setFieldValues","then","_","valueChanged","nanoFilterChanged","emit","facetName","viewFilterChange","attachChangeListener","appliedFilterChanged","updateContent","tplUpdate","handleFilterChange","appliedFilters","foundValue_1","find","filter","name","values","outputTo","outputSlot","outputEle","el","templateStr","origFilters","writeTask","innerHTML","tplRenderFn","orig","dyn","selected","Object","assign","dynFilters","nanoTplUpdated","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","attach","addEventListener","removeEventListener","connectedCallback","templateSlot","querySelector","filterIds","replace","componentWillLoad","storeId","ComponentStore","init","globalStoreMethod","componentDidLoad","render","h","Host","class","show-filter","ref","div","Wormhole"],"mappings":"kVAAA,IAAMA,EAAmB,sSCgBZC,EAAaC,EAAA,sBAAA,WAL1B,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,mHAYUA,KAAAC,SAAmB,KAEnBD,KAAAE,aAAe,IAAIC,SAAQ,SAACC,GAClCL,EAAKM,YAAcD,KAIZJ,KAAAM,cAA+B,CAACC,WAChCP,KAAAQ,WAAsB,MACtBR,KAAAS,aAA4B,KAC5BT,KAAAU,cAAwB,KAQzBV,KAAAW,WAAqB,KAKrBX,KAAAY,MAAgC,GAKhCZ,KAAAa,SAAyB,KAYzBb,KAAAc,YAA8B,UA8H9Bd,KAAAe,kBAAoB,WAC1B,IAAIC,EAAOjB,EAAKkB,iBAChB,GAAIlB,EAAKmB,eAAeF,GAAO,CAC7BjB,EAAKO,cAAgBU,EACrB,OAAO,KAET,OAAO,OAtHTnB,EAAAsB,UAAAC,SAAA,WAAA,IAAArB,EAAAC,KACE,IAAIqB,EAASrB,KAAKY,MAClB,IAAII,EAEJ,UAAWK,IAAW,SAAUL,EAAOK,EAAOC,OAASD,EAAOE,MAAM,KAAO,QACtEP,EAAOhB,KAAKY,MAEjB,GAAIZ,KAAKkB,eAAeF,GAAO,CAC7B,IAAIQ,EAAYxB,KAAKyB,eAAeT,GAEpC,GAAIQ,GAAaA,EAAUF,OAAQtB,KAAKM,cAAgBU,MAEnD,CACHhB,KAAKE,aAAawB,MAAK,SAAAC,GACrB5B,EAAK0B,eAAeT,GACpBjB,EAAKO,cAAgBU,QAQ7BnB,EAAAsB,UAAAS,aAAA,WACE5B,KAAKY,MAAQZ,KAAKM,cAClBN,KAAK6B,kBAAkBC,KAAK,CAC1B7B,SAAUD,KAAKC,SACf8B,UAAW/B,KAAKW,WAChBC,MAAOZ,KAAKM,cACZO,SAAUb,KAAKa,YAKnBhB,EAAAsB,UAAAa,iBAAA,WACE,GAAIhC,KAAKQ,WAAYR,KAAKiC,4BACrBjC,KAAKiC,qBAAqB,QAKjCpC,EAAAsB,UAAAe,qBAAA,WACE,GAAIlC,KAAKW,YAAcX,KAAKU,gBACvBV,KAAKU,gBAAkBV,KAAKC,UAAYD,KAAKa,WAAa,OAC7D,CACAb,KAAKmC,kBAKTtC,EAAAsB,UAAAiB,UAAA,WACEpC,KAAKmC,iBAIPtC,EAAAsB,UAAAkB,mBAAA,WAAA,IAAAtC,EAAAC,KACE,GAAIA,KAAKS,cAAgBT,KAAKS,aAAa6B,eAAgB,CACzD,IAAMC,EAAavC,KAAKS,aAAa6B,eAAeE,MAAK,SAAAC,GAAU,OAAAA,EAAOC,OAAS3C,EAAKY,cACxF,IAAK4B,EAAY,OAEjBvC,KAAKE,aAAawB,MAAK,SAAAC,GACrB,IAAIH,EAAYzB,EAAK0B,eAAec,EAAWI,QAC/C,GAAInB,GAAaA,EAAUF,OAAQvB,EAAKa,MAAQY,KAGpDxB,KAAKmC,iBAGCtC,EAAAsB,UAAAgB,cAAA,WAAA,IAAApC,EAAAC,KACN,IAAI4C,EAAW5C,KAAK6C,YAAc7C,KAAK8C,UACvC,IAAK9C,KAAK+C,GAAI,OAGd,IAAK/C,KAAKgD,YAAahD,KAAKQ,WAAa,UAEpC,IAAKR,KAAKW,aAAeiC,GAAa5C,KAAKgD,eAAiBhD,KAAKS,eAAiBT,KAAKS,aAAawC,YAAYjD,KAAKW,aAAe,CACvIX,KAAKQ,WAAa,MAIpB,IAAKoC,EAAU,OAGf,IAAK5C,KAAKS,aAAc,CACtB,GAAIT,KAAKgD,YAAa,CACpBE,GAAU,WACRN,EAASO,UAAYpD,EAAKqD,YAAYrD,EAAKiD,YAAa,CACtDK,KAAM,GACNC,IAAK,GACLC,SAAUxD,EAAKO,eAAiBP,EAAKO,cAAcgB,OAASvB,EAAKO,cAAgBP,EAAKa,QAExF,IAAKb,EAAKa,QAAUb,EAAKa,MAAMU,OAAQvB,EAAKgB,4BAEzC,IAAKf,KAAKY,QAAUZ,KAAKY,MAAMU,OAAQtB,KAAKe,oBACnD,OAIFmC,GAAU,WACRN,EAASO,UAAYpD,EAAKqD,YAAYrD,EAAKiD,YAAa,CACtDK,KAAIG,OAAAC,OAAA,GAAO1D,EAAKU,aAAawC,YAAYlD,EAAKY,aAC9C2C,IAAGE,OAAAC,OAAA,GAAO1D,EAAKU,aAAaiD,WAAW3D,EAAKY,aAC5C4C,SAAUxD,EAAKO,eAAiBP,EAAKO,cAAcgB,OAASvB,EAAKO,cAAgBP,EAAKa,QAExFb,EAAKM,cACLN,EAAK0B,iBAEL,IAAK1B,EAAKS,WAAYT,EAAKS,WAAa,KACxCT,EAAK4D,eAAe7B,KAAK/B,EAAKgD,QAc1BlD,EAAAsB,UAAAF,eAAA,WACN,IAAI0B,EAAS,GACb,IAAIiB,EAAS5D,KAAK6C,WAAWgB,iBAAiB,uDAE9C,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAOtC,OAAQwC,IAAK,CACtC,IAAIC,EAAQH,EAAOE,GAGnB,GAAIC,EAAMC,OAAS,kBAAmB,CACpC,IAAIC,EAA4BF,EAChC,IAAK,IAAIG,EAAI,EAAGA,EAAID,EAAOE,QAAQ7C,OAAQ4C,IAAK,CAC9C,IAAKD,EAAOE,QAAQD,GAAGX,WAAaU,EAAOE,QAAQD,GAAGtD,MAAMU,OAAQ,SACpEqB,EAAOyB,KAAKH,EAAOE,QAAQD,GAAGtD,aAE3B,GAAKmD,EAAMC,OAAS,YAAcD,EAAMC,OAAS,SAAaD,EAAMM,SAAWN,EAAMnD,MAAMU,OAAS,CACzGqB,EAAOyB,KAAKL,EAAMnD,QAGtB,OAAO+B,GAID9C,EAAAsB,UAAAM,eAAA,SAAeT,GACrBA,EAAOA,GAAQhB,KAAKM,cACpB,IAAKU,EAAM,OAEX,IAAIsD,EAAQ,GACZ,IAAIV,EAAS5D,KAAK6C,WAAWgB,iBAAiB,mFAE9C,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAOtC,OAAQwC,IAAK,CACtC,IAAIC,EAAQH,EAAOE,GAEnB,GAAIC,EAAMQ,UAAYR,EAAMC,OAAS,QAAUD,EAAMC,OAAS,SAAWD,EAAMC,OAAS,UAAYD,EAAMC,OAAS,SAAU,SAE7H,GAAID,EAAMC,OAAS,mBAAqBD,EAAMC,OAAS,aAAc,CACnE,IAAIC,EAA4BF,EAChC,IAAK,IAAIG,EAAI,EAAGA,EAAID,EAAOE,QAAQ7C,OAAQ4C,IAAK,CAC9C,IAAKlD,EAAKwD,SAASP,EAAOE,QAAQD,GAAGtD,OAAQqD,EAAOE,QAAQD,GAAGX,SAAW,UACrE,CACHe,EAAMF,KAAKH,EAAOrD,OAClBqD,EAAOE,QAAQD,GAAGX,SAAW,KAC7B,GAAIQ,EAAMC,OAAS,aAAcC,EAAOrD,MAAQqD,EAAOE,QAAQD,GAAGtD,aAGjE,GAAI,CAAC,WAAY,QAAS,MAAO,UAAW,gBAAgB4D,SAAST,EAAMC,MAAO,CACvF,GAAIhD,EAAKwD,SAAST,EAAMnD,OAAQ,CAC9B0D,EAAMF,KAAKL,EAAMnD,OACjBmD,EAAMM,QAAU,UACX,IAAKrD,EAAKM,SAAWyC,EAAMnD,MAAMU,OAAQ,CAC9CyC,EAAMM,QAAU,UACXN,EAAMM,QAAU,OAG3B,OAAOC,GAGDzE,EAAAsB,UAAAD,eAAA,SAAeuD,GACrB,KAAMzE,KAAKM,gBAAkBmE,EAAQ,OAAO,KAC5C,IAAKzE,KAAKM,gBAAkBmE,EAAQ,OAAO,MAC3C,GAAIzE,KAAKM,eAAiBmE,EAAOnD,SAAWtB,KAAKM,cAAcgB,OAAQ,OAAO,KAE9E,IAAIoD,EAAa,MACjB,IAAK,IAAIZ,EAAI,EAAGA,EAAIW,EAAOnD,OAAQwC,IAAK,CACtC,IAAKY,KAAgB1E,KAAKM,gBAAkBN,KAAKM,cAAckE,SAASC,EAAOX,KAAMY,EAAa,KAEpG,OAAOA,GAGD7E,EAAAsB,UAAAc,qBAAA,SAAqB0C,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,KAC3B,IAAK3E,KAAK6C,WAAY,OACtB,GAAI8B,EAAQ,CACV3E,KAAK6C,WAAW+B,iBAAiB,SAAU5E,KAAKe,mBAChDf,KAAK6C,WAAW+B,iBAAiB,aAAc5E,KAAKe,uBAC/C,CACLf,KAAK6C,WAAWgC,oBAAoB,SAAU7E,KAAKe,mBACnDf,KAAK6C,WAAWgC,oBAAoB,aAAc7E,KAAKe,qBAI3DlB,EAAAsB,UAAA2D,kBAAA,WACE9E,KAAK+E,aAAe/E,KAAK+C,GAAGiC,cAAc,4BAC1ChF,KAAK6C,WAAa7C,KAAK+C,GAAGiC,cAAc,mBACxChF,KAAKC,SAAWD,KAAKW,WAAa,IAAMsE,IAExC,KAAMjF,KAAK+E,aAAc,CACvB/E,KAAKgD,YAAchD,KAAK+E,aAAa5B,UACrCnD,KAAKgD,YAAchD,KAAKgD,YAAYkC,QAAQ,UAAW,QAI3DrF,EAAAsB,UAAAgE,kBAAA,WACE,GAAInF,KAAKoF,QAASC,EAAeC,KAAKtF,KAAM,CAAC,SAAWA,KAAKc,aAAed,KAAKuF,kBAAoBvF,KAAKoF,UAG5GvF,EAAAsB,UAAAqE,iBAAA,WACExF,KAAKmC,gBAEL,GAAInC,KAAKgD,aAAehD,KAAKW,YAAcX,KAAKS,cAAgBT,KAAKS,aAAawC,YAAYjD,KAAKW,YACjGX,KAAKQ,WAAa,MAGtBX,EAAAsB,UAAAsE,OAAA,WAAA,IAAA1F,EAAAC,KACE,OACE0F,EAACC,EAAI,CAACC,MAAO,CACXC,cAAe7F,KAAKQ,aAEpBkF,EAAA,MAAA,CAAKI,IAAK,SAAAC,GAAO,OAAAhG,EAAK+C,UAAYiD,IAChCL,EAAA,OAAA,CAAMhD,KAAK,oZAlSK,IAyS1BsD,EAAUrG,EAA+C,CAAC,oBAAqB,eAAgB,gBAAiB,SAAU,cAAe,gBACzI,IAAIsF,EAAY","sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot=\"filter-template\"]),\n  &::slotted([slot=\"filter-template\"]) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import { Component, h, Element, Host, Prop, Watch, State, EventEmitter, Event, writeTask } from '@stencil/core';\nimport { IndexResult, FilterChangeEventDetail, AlgoliaFacet } from '../../interface';\nimport { SearchChangeEvent, Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\nimport { ComponentStore, StorageMethods } from '../../utils/store/component-store';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss'\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop() value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    let valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string') vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      let foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then(_ => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        })\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator\n    });\n  }\n\n  @Watch('showFilter')\n  viewFilterChange() {\n    if (this.showFilter) this.attachChangeListener();\n    else this.attachChangeListener(false);\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (this.filterName && this.filterChanged &&\n        (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(filter => filter.name === this.filterName);\n      if (!foundValue) return;\n\n      this.tplWillRnder.then(_ => {\n        let foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      })\n    }\n    this.updateContent();\n  }\n\n  private updateContent() {\n    let outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (!this.filterName || !outputTo || (this.templateStr && (!this.indexResults || !this.indexResults.origFilters[this.filterName]))) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected: this.internalValue && this.internalValue.length ? this.internalValue : this.value\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected: this.internalValue && this.internalValue.length ? this.internalValue : this.value\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    })\n  }\n\n  private handleChangeEvent = () => {\n    let vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  }\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    let values = [];\n    let fields = this.outputSlot.querySelectorAll('input[type=\"checkbox\"], input[type=\"radio\"], select');\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length) continue;\n          values.push(select.options[n].value)\n        }\n      } else if ((field.type !== 'checkbox' && field.type !== 'radio') || (field.checked && field.value.length)) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    let found = [];\n    let fields = this.outputSlot.querySelectorAll('input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox');\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value)) select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one') select.value = select.options[n].value;\n          }\n        }\n      } else if (['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(field.type)) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length) return true;\n\n    let hasChanged = false;\n    for (var i = 0; i < newVal.length; i++) {\n      if (!hasChanged && (!this.internalValue || !this.internalValue.includes(newVal[i]))) hasChanged = true;\n    }\n    return hasChanged;\n  };\n\n  private attachChangeListener(attach: boolean = true) {\n    if (!this.outputSlot) return;\n    if (attach) {\n      this.outputSlot.addEventListener('change', this.handleChangeEvent);\n      this.outputSlot.addEventListener('nanoChange', this.handleChangeEvent);\n    } else {\n      this.outputSlot.removeEventListener('change', this.handleChangeEvent);\n      this.outputSlot.removeEventListener('nanoChange', this.handleChangeEvent);\n    }\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId) ComponentStore.init(this, ['value'], (this.storeMethod || this.globalStoreMethod), this.storeId);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (this.templateStr && this.filterName && this.indexResults && this.indexResults.origFilters[this.filterName])\n      this.showFilter = true\n  }\n\n  render() {\n    return (\n      <Host class={{\n        'show-filter': this.showFilter\n      }}>\n        <div ref={div => this.outputEle = div}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    )\n  }\n}\n\nWormhole((AlgoliaFilter as WormholeConsumerConstructor), ['globalStoreMethod', 'indexResults', 'filterChanged', 'facets', 'tplRenderFn', 'changeEvent']);\nlet filterIds = 0;\n"]}

package/dist/nano-components/p-88d68319.js

@@ -1,2 +0,0 @@
-const o=(o,n)=>"string"==typeof o&&o.length>0?Object.assign({"nano-color":!0,[`nano-color-${o}`]:!0},n):n,n=o=>{const n={};return(o=>void 0!==o?(Array.isArray(o)?o:o.split(" ")).filter((o=>null!=o)).map((o=>o.trim())).filter((o=>""!==o)):[])(o).forEach((o=>n[o]=!0)),n};export{o as c,n as g}
-//# sourceMappingURL=p-88d68319.js.map

package/dist/nano-components/p-88d68319.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/theme.ts"],"names":["createColorClasses","color","cssClassMap","length","Object","assign","nano-color","[object Object]","getClassMap","classes","map","undefined","Array","isArray","split","filter","c","trim","getClassList","forEach"],"mappings":"MASaA,EAAqB,CAACC,EAAiCC,IACzC,iBAAVD,GAAsBA,EAAME,OAAS,EAACC,OAAAC,OAAA,CACnDC,cAAc,EACdC,CAAC,cAAcN,MAAU,GACtBC,GACDA,EAcOM,EAAeC,IAC1B,MAAMC,EAAmB,GAEzB,MAd0B,CAACD,QACXE,IAAZF,GACYG,MAAMC,QAAQJ,GAAWA,EAAUA,EAAQK,MAAM,MAE5DC,QAAOC,GAAU,MAALA,IACZN,KAAIM,GAAMA,EAAaC,SACvBF,QAAOC,GAAW,KAANA,IAEV,GAKPE,CAAaT,GAASU,SAAQH,GAAKN,EAAIM,IAAK,IACrCN","sourcesContent":["import { Color, CssClassMap } from '../interface';\n\nexport const hostContext = (selector: string, el: HTMLElement): boolean => {\n  return el.closest(selector) !== null;\n};\n\n/**\n * Create the mode and color classes for the component based on the classes passed in\n */\nexport const createColorClasses = (color: Color | undefined | null, cssClassMap?: CssClassMap): CssClassMap | undefined => {\n  return (typeof color === 'string' && color.length > 0) ? {\n    'nano-color': true,\n    [`nano-color-${color}`]: true,\n    ...cssClassMap\n  } : cssClassMap;\n};\n\nexport const getClassList = (classes: string | (string | null | undefined)[] | undefined): string[] => {\n  if (classes !== undefined) {\n    const array = Array.isArray(classes) ? classes : classes.split(' ');\n    return array\n      .filter(c => c != null)\n      .map(c => (c as string).trim())\n      .filter(c => c !== '');\n  }\n  return [];\n};\n\nexport const getClassMap = (classes: string | string[] | undefined): CssClassMap => {\n  const map: CssClassMap = {};\n  getClassList(classes).forEach(c => map[c] = true);\n  return map;\n};\n"]}

package/dist/nano-components/p-89b78166.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as a,h as o,e as i,g as r}from"./p-7a6bc3c5.js";import{i as n}from"./p-6a284815.js";import{s}from"./p-768fb4c8.js";import{f as e}from"./p-55aac2eb.js";import{d as b}from"./p-190e2d91.js";import{C as d}from"./p-4dcc918b.js";import{a as l}from"./p-4087e0d9.js";import{c}from"./p-88d68319.js";import"./p-dfe5a97d.js";import"./p-3796f493.js";const h=class{constructor(o){t(this,o),this.nanoTabShow=a(this,"nanoTabShow",7),this.nanoTabHide=a(this,"nanoTabHide",7),this.initialTouchX=null,this.initialTouchY=null,this.hasScrollControls=!1,this.hideControlRight=!0,this.hideControlLeft=!0,this.isLegacy=!document.head.attachShadow,this.placement="top",this.noScrollControls=!1,this.storeMethod="session",this.updateScrollControls=()=>{this.hasScrollControls=!this.noScrollControls&&["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth},this.handleClick=t=>{const a=t.target.closest("nano-tab");a&&this.setActiveTab(a)},this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target.closest("nano-tab");a&&(this.setActiveTab(a),t.preventDefault())}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&"nano-tab"===a.tagName.toLowerCase()){const o=this.getAllTabs();let i=o.indexOf(a);"Home"===t.key?i=0:"End"===t.key?i=o.length-1:this.isRtl&&"ArrowRight"===t.key||!this.isRtl&&"ArrowLeft"===t.key?i=Math.max(0,i-1):(this.isRtl&&"ArrowLeft"===t.key||!this.isRtl&&"ArrowRight"===t.key)&&(i=Math.min(o.length-1,i+1)),o[i].setFocus(),["top"].includes(this.placement)&&s(o[i],this.nav,"horizontal","center"),t.preventDefault()}}},this.handleTabScroll=()=>{if(!this.hasScrollControls)return void(this.hideControlLeft=this.hideControlRight=!0);let t=this.isRtl?0===this.nav.scrollLeft:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;(this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:0===this.nav.scrollLeft)?(this.hideControlLeft=!0,this.hideControlRight=!1):t?(this.hideControlLeft=!1,this.hideControlRight=!0):(this.hideControlRight=!1,this.hideControlLeft=!1)},this.handleBtnClick=(t=!1)=>{const a=this.getNavWidth();let o;o=t?this.nav.scrollLeft+a-20:this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(i){this.nav.scrollLeft=o}},this.handleTouchStart=t=>{const a=t.changedTouches[0];this.initialTouchX=a.pageX,this.initialTouchY=a.pageY},this.handleTouchEnd=t=>{const a=t.changedTouches[0],o=a.pageX-this.initialTouchX,i=a.pageY-this.initialTouchY;var r=this.initialTouchX-a.clientX,n=this.initialTouchY-a.clientY;const s=Math.abs(o)>=70&&Math.abs(i)<=70,e=this.getAllTabs(),b=e.findIndex((t=>t.active));if(s){const t=o<0&&"top"===this.placement||o>0&&"top"!==this.placement?1:-1;e[b+t]&&(this.setActiveTab(e[b+t]),Math.abs(r)>Math.abs(n)&&this.activePanel.setAttribute("animation-dir",r>0?"left":"right"))}this.initialTouchX=null,this.initialTouchY=null}}handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllTabs().find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){this.rightBtn&&b(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){this.leftBtn&&b(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){this.hasScrollControls?setTimeout((()=>this.handleTabScroll()),20):setTimeout((()=>{this.hideControlLeft=this.hideControlRight=!0}),20)}async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllTabs().find((a=>a.panel===t));a&&this.setActiveTab(a)}getAllTabs(t=!1){const a=Array.from(this.host.querySelectorAll("nano-tab"));return t?a:a.filter((t=>!t.disabled))}getAllPanels(){return Array.from(this.host.querySelectorAll("nano-tab-content"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}setActiveTab(t,a=!0){if(t&&t!==this.activeTab&&!t.disabled){const o=this.activeTab;this.activeTab=t,this.tab=t.panel,this.getAllTabs().map((t=>t.active=t===this.activeTab)),this.getAllPanels().map((t=>{t.name===this.activeTab.panel?(t.active=!0,this.activePanel=t):t.active=!1,t.removeAttribute("animation-dir")})),this.syncActiveTabIndicator(),["top"].includes(this.placement)&&s(this.activeTab,this.nav,"horizontal","center"),a&&(o&&this.nanoTabHide.emit({name:o.panel}),this.nanoTabShow.emit({name:this.activeTab.panel}))}}setAriaLabels(){const t=this.getAllTabs(),a=this.getAllPanels();t.map((t=>{const o=a.find((a=>a.name===t.panel));o&&(t.setAttribute("aria-controls",o.getAttribute("id")),o.setAttribute("aria-labelledby",t.getAttribute("id")))}))}syncActiveTabIndicator(){this.getAllTabs(!0).forEach((t=>t.setAttribute("direction","top"===this.placement?"horizontal":"vertical")));const t=this.getActiveTab(),a=t.clientWidth,o=t.clientHeight,i=l(t,this.nav),r=i.top+this.nav.scrollTop,n=i.left+this.nav.scrollLeft;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`,this.activeTabIndicator.style.height=null,this.activeTabIndicator.style.transform=`translateX(${n}px)`;break;case"start":this.activeTabIndicator.style.width=null,this.activeTabIndicator.style.height=`${o}px`,this.activeTabIndicator.style.transform=`translateY(${r}px)`}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);return this.nav.clientWidth-(parseFloat(t.paddingLeft)+parseFloat(t.paddingRight))}componentDidLoad(){new IntersectionObserver(((t,a)=>{t[0].intersectionRatio>0&&(this.setAriaLabels(),this.setActiveTab(this.getActiveTab()||this.getAllTabs()[0],!1),this.storeId&&d.init(this,["tab"],this.storeMethod,this.storeId),a.unobserve(t[0].target))})).observe(this.host),e.observe(this.tabGroup),this.leftBtn&&(e.observe(this.leftBtn),e.observe(this.rightBtn)),this.resizeObserver=new n((()=>this.updateScrollControls())),this.resizeObserver.observe(this.nav),this.mutationObserver=new MutationObserver((t=>{t.some((t=>!["aria-labelledby","aria-controls"].includes(t.attributeName)))&&setTimeout((()=>this.setAriaLabels())),setTimeout((()=>this.handleTabScroll()),500)})),this.mutationObserver.observe(this.host,{attributes:!0,childList:!0,subtree:!0}),requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect(),e.unobserve(this.tabGroup),this.leftBtn&&(e.unobserve(this.leftBtn),e.unobserve(this.rightBtn)),this.resizeObserver&&this.resizeObserver.unobserve(this.nav)}render(){return this.isRtl="rtl"===this.host.ownerDocument.dir,o(i,{class:Object.assign(Object.assign({},c(this.color)),{legacy:this.isLegacy}),dir:this.isRtl?"rtl":null},o("div",{part:"base",ref:t=>this.tabGroup=t,class:{"nano-tab-group":!0,"nano-tab-group--top":"top"===this.placement,"nano-tab-group--start":"start"===this.placement,"nano-tab-group--has-scroll-controls":this.hasScrollControls,"nano-tab-group--has-scroll-controls-left":!this.hideControlLeft,"nano-tab-group--has-scroll-controls-right":!this.hideControlRight},onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("div",{class:"nano-tab-group__nav-container"},"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--left":!0},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(!1)},o("nano-icon",{name:"light/chevron-left"})),o("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"nano-tab-group__nav",onScroll:this.handleTabScroll},o("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},o("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),o("slot",{name:"tabs"}))),"top"===this.placement&&o("button",{class:{"nano-tab-group__scroll-button":!0,"nano-tab-group__scroll-button--right":!0},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(!0)},o("nano-icon",{name:"light/chevron-right"}))),o("slot",{name:"tab-content-header"}),o("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},o("slot",null))))}get host(){return r(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};h.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:5px;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:"currentColor";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#0084a9;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--tab-indicator-size:var(--indicator-size);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#0084a9;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2696b6));--tab-text-color:rgba(var(--nano-color-base-rgb), .7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #007090))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease;transition:var(--indicator-transition) transform ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0px;mask-position:0px;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius)}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}';export{h as nano_tab_group}
-//# sourceMappingURL=p-89b78166.entry.js.map

package/dist/nano-components/p-89b78166.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["TabGroup","[object Object]","hostRef","this","initialTouchX","initialTouchY","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","tab","target","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","endRight","scrollLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","activeTab","panel","find","syncActiveTabIndicator","rightBtn","displayTransition","leftBtn","setTimeout","_","includeDisabled","Array","from","host","querySelectorAll","filter","disabled","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","forEach","getActiveTab","width","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","IntersectionObserver","entries","observer","intersectionRatio","setAriaLabels","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","dir","ownerDocument","disconnect","h","Host","class","Object","assign","createColorClasses","color","legacy","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@import \"../../global/style/utilities/globals\";\n@import \"../../global/style/nano-theme/form\";\n@import \"../../global/style/nano-theme/base\";\n@import \"../../global/style/nano-theme/layers\";\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-lightgrey};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentColor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to var(--border-radius);\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to var(--border-radius);\n  * @prop --tab-text-color: defaults to #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-lightgrey};\n  --indicator-size: 5px;\n\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius);\n  --tab-text-color: #{$color-blue};\n\n  --shadow-opacity: 0.1;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-width: 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --tab-indicator-size: var(--indicator-size);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n  }\n}\n\n// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{$color-lightblue};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\n  }\n}\n\n:host([placement=\"start\"]), :host([placement=\"end\"]) {\n  --content-padding: 1rem;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{$color-darkgrey};\n  --indicator-color: #{$color-blue};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), .7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    flex: 1 0 auto;\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &.focus-visible:focus {\n      box-shadow: #{$control-focus-style} inset;\n    }\n\n    &--left {\n      left: 0;\n    }\n\n    &--right {\n      right: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity)) ;\n        height: 10px;\n        position: absolute;\n        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(var(--tabs-padding-top), var(--tabs-padding-end), var(--tabs-padding-bottom), var(--tabs-padding-start));\n      display: flex;\n      overflow-x: auto;\n      overflow-y: hidden;\n      transition: #{$transition-medium} ease;\n      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);\n      mask-repeat: no-repeat;\n      mask-image: linear-gradient(\n        to left,\n        rgba(0,0,0,0) 0,\n        rgba(0,0,0,0) var(--tabs-padding-start),\n        rgba(0,0,0,1) calc(var(--tabs-padding-start) * 2),\n        rgba(0,0,0,1) calc(100% - (var(--tabs-padding-end) * 2)),\n        rgba(0,0,0,0) calc(100% - var(--tabs-padding-end)),\n        rgba(0,0,0,0)\n      );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        @include padding(var(--tabs-padding-top), var(--tabs-padding-end), var(--tabs-padding-bottom), 0);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0px;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      width: auto;\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      width: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      @include border-radius(0, var(--content-border-radius), var(--content-border-radius), 0)\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { displayTransition, createColorClasses, getOffset } from '../../utils/utils';\nimport { Color } from '../../interface';\nimport { ComponentStore, StorageMethods } from '../../utils/store/component-store';\n\n/**\n * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header = a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObserver: MutationObserver;\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() isLegacy = !document.head.attachShadow;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop() placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllTabs().find(el => el.panel === this.tab);\n    this.setActiveTab(tab)\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout(_ => this.handleTabScroll(), 20)\n    else setTimeout(_ => { this.hideControlLeft = this.hideControlRight = true }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tabs = this.getAllTabs();\n    const tab = tabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  private getAllTabs(includeDisabled = false) {\n    const tabs = Array.from(this.host.querySelectorAll('nano-tab')) as [\n      HTMLNanoTabElement\n    ];\n    if (includeDisabled) return tabs;\n    return tabs.filter((el: any) => !el.disabled);\n  }\n\n  private getAllPanels() {\n    return Array.from(this.host.querySelectorAll('nano-tab-content')) as [\n      HTMLNanoTabContentElement\n    ];\n  }\n\n  private getActiveTab() {\n    return this.getAllTabs().find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (tab && tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels().map(\n        (el) => {\n          if (el.name === this.activeTab.panel) {\n            el.active = true;\n            this.activePanel = el;\n          } else el.active = false;\n          el.removeAttribute('animation-dir')\n        }\n      );\n      // active tab can be changed on init - this won't be ready. No big thing\n      // try {\n        this.syncActiveTabIndicator();\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n        }\n      // }\n      // catch(e) {}\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllTabs();\n    const panels = this.getAllPanels();\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs(true).forEach(tab => tab.setAttribute('direction', this.placement === 'top' ? 'horizontal' : 'vertical'));\n\n    const tab = this.getActiveTab();\n    const width = tab.clientWidth;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.nav);\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left + this.nav.scrollLeft;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return clientWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);\n  }\n\n  // Event handlers\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllTabs();\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else if (\n          (this.isRtl && event.key === 'ArrowLeft') ||\n          (!this.isRtl && event.key === 'ArrowRight')\n        ) {\n          index = Math.min(tabs.length - 1, index + 1);\n        }\n        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\n          scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n        }\n        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl ? this.nav.scrollLeft === 0 : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let endLeft = this.isRtl ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  }\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = (this.nav.scrollLeft + navWidth) - 20;\n    else leftAmt = (this.nav.scrollLeft - navWidth) + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    var xDiff = this.initialTouchX - touch.clientX;\n    var yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    const tabs = this.getAllTabs();\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo = (distX < 0 && this.placement === 'top') || (distX > 0 && this.placement !== 'top') ? 1 : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);\n\n        if (this.storeId) ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\n\n    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\n\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host class={{ ...createColorClasses(this.color), 'legacy': this.isLegacy }} dir={this.isRtl ? 'rtl' : null}>\n        <div\n          part='base'\n          ref={(el) => (this.tabGroup = el)}\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class='nano-tab-group__nav-container'>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true\n                }}\n                ref={btn => this.leftBtn = btn}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon name=\"light/chevron-left\"></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              key='nav'\n              part='nav'\n              class='nano-tab-group__nav'\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part='tabs'\n                class='nano-tab-group__tabs'\n                role='tablist'\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part='active-tab-indicator'\n                  class='nano-tab-group__active-tab-indicator'\n                />\n                <slot name='tabs' />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true\n                }}\n                ref={btn => this.rightBtn = btn}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon name=\"light/chevron-right\"></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part='body'\n            class='nano-tab-group__body'\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-8c6418d2.system.js

@@ -1,2 +0,0 @@
-System.register(["./p-be88c3ef.system.js"],(function(t){"use strict";var e;return{setters:[function(t){e=t.a}],execute:function(){t({l:i,s:r,u:l});var o=new Set;function i(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function l(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,e,o){if(o===void 0){o=false}if(!o){try{t.scrollTo({left:e,behavior:"smooth"})}catch(i){t.scrollLeft=e}return}try{t.scrollTo({top:e,behavior:"smooth"})}catch(i){t.scrollTop=e}}function r(t,o,i,l){if(i===void 0){i="vertical"}if(l===void 0){l="start"}var r=e(t,o);var f=r.top+o.scrollTop;var c=r.left+o.scrollLeft;var n=o.scrollLeft;var a=o.scrollLeft+o.offsetWidth;var h=o.scrollTop;var d=o.scrollTop+o.offsetHeight;if(i==="horizontal"||i==="both"){if(l==="start"){if(c<n)s(o,c);else if(c+t.clientWidth>a)s(o,c-o.offsetWidth+t.clientWidth)}else s(o,o.scrollLeft+r.left-o.offsetWidth/2+t.offsetWidth/2)}if(i==="vertical"||i==="both"){if(f<h)s(o,f,true);else if(f+t.clientHeight>d){s(o,f-o.offsetHeight+t.clientHeight,true)}}}}}}));
-//# sourceMappingURL=p-8c6418d2.system.js.map

package/dist/nano-components/p-8c6418d2.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/scroll.ts"],"names":["locks","Set","lockBodyScrolling","lockingEl","add","document","body","classList","unlockBodyScrolling","delete","size","remove","scrollTo","element","scrollAmt","vertical","left","behavior","e","scrollLeft","top","scrollTop","scrollIntoView","container","direction","position","offset","getOffset","offsetTop","offsetLeft","minX","maxX","offsetWidth","minY","maxY","offsetHeight","clientWidth","clientHeight"],"mappings":"mJAEA,IAAMA,EAAQ,IAAIC,aAMFC,EAAkBC,GAChCH,EAAMI,IAAID,GACVE,SAASC,KAAKC,UAAUH,IAAI,6BAMdI,EAAoBL,GAClCH,EAAMS,OAAON,GAEb,GAAIH,EAAMU,OAAS,EAAG,CACpBL,SAASC,KAAKC,UAAUI,OAAO,qBAInC,SAASC,EAASC,EAAsBC,EAAmBC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,MACzD,IAAKA,EAAU,CACb,IAAMF,EAAQD,SAAS,CAAEI,KAAMF,EAAWG,SAAU,WACpD,MAAMC,GAAKL,EAAQM,WAAaL,EAChC,OAEF,IAAMD,EAAQD,SAAS,CAAEQ,IAAKN,EAAWG,SAAU,WACnD,MAAMC,GAAKL,EAAQQ,UAAYP,YAMjBQ,EACdT,EACAU,EACAC,EACAC,GADA,GAAAD,SAAA,EAAA,CAAAA,EAAA,WACA,GAAAC,SAAA,EAAA,CAAAA,EAAA,QAEA,IAAMC,EAASC,EAAUd,EAASU,GAClC,IAAMK,EAAYF,EAAON,IAAMG,EAAUF,UACzC,IAAMQ,EAAaH,EAAOV,KAAOO,EAAUJ,WAC3C,IAAMW,EAAOP,EAAUJ,WACvB,IAAMY,EAAOR,EAAUJ,WAAaI,EAAUS,YAC9C,IAAMC,EAAOV,EAAUF,UACvB,IAAMa,EAAOX,EAAUF,UAAYE,EAAUY,aAE7C,GAAIX,IAAc,cAAgBA,IAAc,OAAQ,CACtD,GAAIC,IAAa,QAAS,CACxB,GAAII,EAAaC,EAAMlB,EAASW,EAAWM,QACtC,GAAIA,EAAahB,EAAQuB,YAAcL,EAC1CnB,EAASW,EAAWM,EAAaN,EAAUS,YAAcnB,EAAQuB,kBAC9DxB,EAASW,EAAWA,EAAUJ,WAAaO,EAAOV,KAAOO,EAAUS,YAAY,EAAInB,EAAQmB,YAAY,GAGhH,GAAIR,IAAc,YAAcA,IAAc,OAAQ,CACpD,GAAII,EAAYK,EAAMrB,EAASW,EAAWK,EAAW,WAChD,GAAIA,EAAYf,EAAQwB,aAAeH,EAAM,CAChDtB,EAASW,EAAWK,EAAYL,EAAUY,aAAetB,EAAQwB,aAAc","sourcesContent":["import { getOffset } from './dom';\n\nconst locks = new Set();\n\n/**\n * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n * without premature unlocking.\n */\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n  locks.add(lockingEl);\n  document.body.classList.add('nano-scroll-lock');\n}\n\n/**\n * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n */\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n  locks.delete(lockingEl);\n\n  if (locks.size === 0) {\n    document.body.classList.remove('nano-scroll-lock');\n  }\n}\n\nfunction scrollTo(element: HTMLElement, scrollAmt: number, vertical: boolean = false) {\n  if (!vertical) {\n    try { element.scrollTo({ left: scrollAmt, behavior: 'smooth' }); }\n    catch(e) { element.scrollLeft = scrollAmt }\n    return;\n  }\n  try { element.scrollTo({ top: scrollAmt, behavior: 'smooth' }); }\n  catch(e) { element.scrollTop = scrollAmt }\n}\n\n/**\n * Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n */\nexport function scrollIntoView(\n  element: HTMLElement,\n  container: HTMLElement,\n  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n  position: 'center' | 'start' = 'start'\n) {\n  const offset = getOffset(element, container);\n  const offsetTop = offset.top + container.scrollTop;\n  const offsetLeft = offset.left + container.scrollLeft;\n  const minX = container.scrollLeft;\n  const maxX = container.scrollLeft + container.offsetWidth;\n  const minY = container.scrollTop;\n  const maxY = container.scrollTop + container.offsetHeight;\n\n  if (direction === 'horizontal' || direction === 'both') {\n    if (position === 'start') {\n      if (offsetLeft < minX) scrollTo(container, offsetLeft);\n      else if (offsetLeft + element.clientWidth > maxX)\n        scrollTo(container, offsetLeft - container.offsetWidth + element.clientWidth);\n    } else scrollTo(container, container.scrollLeft + offset.left - container.offsetWidth/2 + element.offsetWidth/2);\n  }\n\n  if (direction === 'vertical' || direction === 'both') {\n    if (offsetTop < minY) scrollTo(container, offsetTop, true);\n    else if (offsetTop + element.clientHeight > maxY) {\n      scrollTo(container, offsetTop - container.offsetHeight + element.clientHeight, true);\n    }\n  }\n}\n"]}