@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/nano-components/p-56ba0d63.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as o,h as n}from"./p-ab5813a7.js";import{f as t}from"./p-f8f89998.js";const a=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-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;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button: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)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";let i=class{constructor(n){o(this,n);this.type="button";this.disabled=false}componentDidLoad(){t.observe(this.button)}connectedCallback(){if(this.button)t.observe(this.button)}disconnectedCallback(){t.unobserve(this.button)}render(){const o=this.href===undefined?"button":"a";return n(o,{part:"base",ref:o=>this.button=o,class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},n("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))}};i.style=a;export{i as nano_icon_button};
+//# sourceMappingURL=p-56ba0d63.entry.js.map

package/dist/nano-components/p-56ba0d63.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","[object Object]","hostRef","this","type","disabled","focusVisible","observe","button","unobserve","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;+EAAA,MAAMA,EAAgB,qhECUTC,EAAU,MALvBC,YAAAC,aAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,mBACEK,EAAaC,QAAQJ,KAAKK,QAG5BP,oBACE,GAAIE,KAAKK,OAAQF,EAAaC,QAAQJ,KAAKK,QAG7CP,uBACEK,EAAaG,UAAUN,KAAKK,QAG9BP,SACE,MAAMS,EAAUP,KAAKQ,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAMC,GAAQb,KAAKK,OAASQ,EAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBhB,KAAKE,UAC/Be,aACWjB,KAAKkB,MACjBC,KAAMnB,KAAKmB,KACXC,MAAOpB,KAAKoB,MACZZ,KAAMR,KAAKQ,MAAQC,UACnBY,OAAQrB,KAAKQ,MAAQR,KAAKqB,OAASrB,KAAKqB,OAASZ,UACjDR,MAAOD,KAAKQ,MAAQR,KAAKC,KAAOD,KAAKC,KAAOQ,WAE5CC,EAAA,YAAA,CAAWS,KAAMnB,KAAKsB,SAAUC,IAAKvB,KAAKwB,QAAOC,cAAc","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --color: defaults to #{$color-palegrey};\n    * @prop --active-color: defaults to #{$color-darkblue--faded};\n    * @prop --hover-color: defaults to #{$color-blue};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    */\n  display: inline-block;\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{$color-darkblue--faded};\n  --hover-color: #{$color-blue};\n  --nano-color-base: var(--color, #{$color-mediumgrey});\n  --background: transparent;\n  --padding: #{$spacing-small};\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. */\n\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n    return (\n      <TagType\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        aria-label={this.label}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n      </TagType>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-593de29b.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function a(t){try{l(r.next(t))}catch(e){o(e)}}function s(t){try{l(r["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):i(t.value).then(a,s)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(a){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(o=a[0]&2?i["return"]:a[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,a[1])).done)return o;if(i=0,o)a=[a[0]&2,o.value];switch(a[0]){case 0:case 1:o=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;i=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!o||a[1]>o[0]&&a[1]<o[3])){n.label=a[1];break}if(a[0]===6&&n.label<o[1]){n.label=o[1];o=a;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(a);break}if(o[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(s){a=[6,s];i=0}finally{r=o=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-b370e3ef.system.js","./p-d84ef175.system.js","./p-1d13dbdf.system.js","./p-9de508a5.system.js"],(function(t){"use strict";var e,n,r,i,o,a,s,l;return{setters:[function(t){e=t.r;n=t.c;r=t.h;i=t.e;o=t.g},function(t){a=t.u;s=t.l},function(t){l=t.M},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}[hidden]{display:none !important}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--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}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;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;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-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}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";var d=0;var c=t("nano_drawer",function(){function t(t){e(this,t);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.nanoOverlayDismiss=n(this,"nanoOverlayDismiss",7);this.componentId="drawer-"+ ++d;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="end";this.contained=false;this.noHeader=false;this.type="overlay"}t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.handleTypeChange=function(){if(this.type!=="push"&&this.type!=="reveal")return;if(!this.contentEle){this.type="overlay";console.warn("a valid contentSelector must be set");return}};t.prototype.handleContentSelector=function(){if(!this.contentSelector)this.contentEle=null;else this.contentEle=this.host.ownerDocument.querySelector(this.contentSelector)};t.prototype.connectedCallback=function(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new l(this.host)};t.prototype.componentWillLoad=function(){if(this.open){this.show()}this.handleContentSelector()};t.prototype.disconnectedCallback=function(){a(this.host)};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(n){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();s(this.host)}if(!this.contentEle||this.type!=="push"&&this.type!=="reveal")return[2];this.contentEle.style.right="0";this.contentEle.style.transition="all ease 250ms";this.contentEle.style.position="relative";this.contentEle.style.overflow="hidden";setTimeout((function(t){return e.contentEle.style.right="25rem"}),0);return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.open=false;this.modal.deactivate();a(this.host);if(!this.contentEle)return[2];this.contentEle.style.transition="";this.contentEle.style.position="";this.contentEle.style.overflow="";this.contentEle.style.right="";return[2]}))}))};t.prototype.handleCloseClick=function(){this.hide()};t.prototype.handleKeyDown=function(t){if(t.key==="Escape"){this.hide()}};t.prototype.handleOverlayClick=function(){var t=this.nanoOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}};t.prototype.handleSlotChange=function(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')};t.prototype.handleTransitionEnd=function(t){var e=t.target;if(t.propertyName==="transform"&&e.classList.contains("drawer__panel")){this.isVisible=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(this.open){this.panel.focus()}}};t.prototype.render=function(){var t;var e=this;var n="drawer--"+this.placement;var o="drawer--"+this.type;var a=this.host.ownerDocument.dir==="rtl";return r(i,{dir:a?"rtl":null},r("div",{part:"base",class:(t={drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible},t[o]=true,t[n]=true,t["drawer--contained"]=this.contained,t["drawer--fixed"]=!this.contained,t["drawer--has-footer"]=this.hasFooter,t),onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},r("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),r("div",{ref:function(t){return e.panel=t},part:"panel",class:"drawer__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},!this.noHeader&&r("header",{part:"header",class:"drawer__header"},r("span",{part:"title",class:"drawer__title",id:this.componentId+"-title"},r("slot",{name:"label"},this.label||String.fromCharCode(65279)))),r("div",{part:"body",class:"drawer__body"},r("slot",null)),r("footer",{part:"footer",class:"drawer__footer"},r("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}},enumerable:false,configurable:true});return t}());c.style=h}}}));
+//# sourceMappingURL=p-593de29b.system.entry.js.map

package/dist/nano-components/{p-76b13c27.system.entry.js.map → p-593de29b.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","exports","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__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={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\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                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","exports","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__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={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\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                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-8a608e6d.entry.js → p-5e7c7d3d.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,i,h as s,e as o,g as r}from"./p-ab5813a7.js";import{i as a}from"./p-debd9efc.js";import{d as n}from"./p-1da5f8df.js";let h=class{constructor(i){t(this,i);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((i=>{let s;if(i==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[i].forEach(((o,r)=>{if(s>=r&&o.applied===false){o.applied=true;t[i].set(r,o);e=true}else if(s<r&&o.applied===true){o.applied=false;t[i].set(r,o);e=true}}))}));if(e)this.applyChanges(t)}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[i,...s]=e.split(" ");const{bp:o,dir:r}=t(i);this.appliedStates[r].set(o,{states:s,applied:false})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:false})}}))}applyChanges(t){let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{if(!t.states)return;t.states.map((i=>{if(t.applied)e.push(i);else e=e.filter((t=>t!==i))}))}))}));this.classNames=e;this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))}));return e}attachRO(){this.ro=new a((t=>{for(const e of t){this.currentWidth=e.contentRect.width;this.currentHeight=e.contentRect.height}}));this.ro.observe(this.el)}connectedCallback(){this.assessChanges=n(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){i((()=>{const{width:t,height:e}=this.el.getBoundingClientRect();this.currentWidth=t;this.currentHeight=e}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(o,{class:{[this.classNames.join(" ")]:true}},s("div",{ref:t=>this.el=t},s("slot",null)))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";const l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";let d=class{constructor(e){t(this,e);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}))}};d.style=l;export{h as nano_resize_observe,d as nano_skeleton};
-//# sourceMappingURL=p-8a608e6d.entry.js.map
+import{r as t,c as e,i,h as s,e as o,g as r}from"./p-ab5813a7.js";import{i as n}from"./p-debd9efc.js";import{d as a}from"./p-1da5f8df.js";let h=class{constructor(i){t(this,i);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((i=>{let s;if(i==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[i].forEach(((o,r)=>{if(s>=r&&o.applied===false){o.applied=true;t[i].set(r,o);e=true}else if(s<r&&o.applied===true){o.applied=false;t[i].set(r,o);e=true}}))}));if(e)this.applyChanges(t)}}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[i,...s]=e.split(" ");const{bp:o,dir:r}=t(i);this.appliedStates[r].set(o,{states:s,applied:false})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:false})}}))}applyChanges(t){let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{if(!t.states)return;t.states.map((i=>{if(t.applied)e.push(i);else e=e.filter((t=>t!==i))}))}))}));this.classNames=e;this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))}));return e}attachRO(){this.ro=new n((t=>{for(const e of t){this.currentWidth=e.contentRect.width;this.currentHeight=e.contentRect.height}}));this.ro.observe(this.el)}connectedCallback(){this.assessChanges=a(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){i((()=>{const{width:t,height:e}=this.el.getBoundingClientRect();this.currentWidth=t;this.currentHeight=e}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(o,{class:{[this.classNames.join(" ")]:true}},s("div",{ref:t=>this.el=t},s("slot",null)))}get host(){return r(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};h.style=":host { display: inline-block } div { height: 100%; }";const l=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-base-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;height:1em}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:100%;border-radius:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";let d=class{constructor(e){t(this,e);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}))}};d.style=l;export{h as nano_resize_observe,d as nano_skeleton};
+//# sourceMappingURL=p-5e7c7d3d.entry.js.map

package/dist/nano-components/{p-8a608e6d.entry.js.map → p-5e7c7d3d.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","el","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","ref","div","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <div ref={(div) => (this.el = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","el","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","ref","div","skeletonCss","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <div ref={(div) => (this.el = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-672e5547.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{h as l}from"./p-ab5813a7.js";const a=({label:a,hasLabelSlot:e,controlId:t,labelId:s,floatLabel:n,placeholder:o,hideLabel:r,hasValue:c,rtl:d,showCharCount:i,maxlength:b,charCount:h})=>{if(!a&&!e)return;if(n){return l("label",{class:"placeholder-as-label",htmlFor:t,id:s},a&&a,!a&&e&&l("slot",{name:"label"}))}else{return l("label",{class:{label:true,"visually-hide":r},htmlFor:t,id:s},l("div",{class:"label-placeholder"},o&&c&&d&&l("span",{class:"placeholder"},o," / "),l("span",{class:"labeltext"},a&&a,!a&&e&&l("slot",{name:"label"})),o&&c&&!d&&l("span",{class:"placeholder"}," / ",o)),i&&l("span",{class:"charcount"},b?b-h+" left":h+" characters"))}};const e=(e,t)=>{const{rtl:s,floatLabel:n,label:o,moreId:r,type:c,hasHelperSlot:d,showInlineError:i,errorMessage:b}=e;const h=!document.head.attachShadow;return[!n?a(Object.assign({},e)):"",l("div",{class:{"has-label":o!==null&&!n,"has-float-label":o!==null&&n,rtl:s,legacy:h,input:true,textarea:c==="textarea"}},n&&a(Object.assign(Object.assign({},e),{rtl:s})),t),i||d?l("div",{class:"more",id:r},!!i?l("div",{class:"error"},b):"",l("div",{class:"helper"},l("slot",{name:"helper"}))):""]};const t=(a,e)=>{const{clearControl:t,onClearText:s,readonly:n,disabled:o,control:r,ref:c,endSlot:d,endValueSlot:i,startSlot:b}=a;const h=()=>{r.setFocus()};return l("div",{class:"native-input-wrap",ref:l=>{if(c)c(l)}},l("span",{class:"start"},l("slot",{name:"start"}),b),e,t&&!n&&!o&&l("button",{type:"button",class:"icon input-clear-icon",tabindex:"-1",onTouchStart:s,onMouseDown:s},l("nano-icon",{name:"light/times"})),l("span",{class:"value-end",onClick:h},l("slot",{name:"value-end"}),i),l("span",{class:"end"},l("slot",{name:"end"}),d))};export{e as F,t as a};
+//# sourceMappingURL=p-672e5547.js.map

package/dist/nano-components/p-672e5547.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/form-control/form-control.tsx"],"names":["renderLabel","label","hasLabelSlot","controlId","labelId","floatLabel","placeholder","hideLabel","hasValue","rtl","showCharCount","maxlength","charCount","h","class","htmlFor","id","name","visually-hide","FormControlWrap","props","children","moreId","type","hasHelperSlot","showInlineError","errorMessage","isLegacy","document","head","attachShadow","Object","assign","has-label","has-float-label","legacy","input","textarea","FormControl","clearControl","onClearText","readonly","disabled","control","ref","endSlot","endValueSlot","startSlot","clickThrough","setFocus","el","tabindex","onTouchStart","onMouseDown","onClick"],"mappings":";;;oCAuCA,MAAMA,EAAc,EAClBC,MAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,IAAAA,EACAC,cAAAA,EACAC,UAAAA,EACAC,UAAAA,MAEA,IAAKX,IAAUC,EAAc,OAC7B,GAAIG,EAAY,CACd,OACEQ,EAAA,QAAA,CAAOC,MAAM,uBAAuBC,QAASZ,EAAWa,GAAIZ,GACzDH,GAASA,GACRA,GAASC,GAAgBW,EAAA,OAAA,CAAMI,KAAK,eAGrC,CACL,OACEJ,EAAA,QAAA,CACEC,MAAO,CAAEb,MAAO,KAAMiB,gBAAiBX,GACvCQ,QAASZ,EACTa,GAAIZ,GAEJS,EAAA,MAAA,CAAKC,MAAM,qBACRR,GAAeE,GAAYC,GAC1BI,EAAA,OAAA,CAAMC,MAAM,eAAeR,SAE7BO,EAAA,OAAA,CAAMC,MAAM,aACTb,GAASA,GACRA,GAASC,GAAgBW,EAAA,OAAA,CAAMI,KAAK,WAEvCX,GAAeE,IAAaC,GAC3BI,EAAA,OAAA,CAAMC,MAAM,qBAAkBR,IAGjCI,GACCG,EAAA,OAAA,CAAMC,MAAM,aACTH,EACGA,EAAYC,EAAY,QACxBA,EAAY,wBAQfO,EAA6D,CACxEC,EACAC,KAEA,MAAMZ,IACJA,EAAGJ,WACHA,EAAUJ,MACVA,EAAKqB,OACLA,EAAMC,KACNA,EAAIC,cACJA,EAAaC,gBACbA,EAAeC,aACfA,GACEN,EACJ,MAAMO,GAAYC,SAASC,KAAKC,aAEhC,MAAO,EACJzB,EAAaL,EAAW+B,OAAAC,OAAA,GAAMZ,IAAW,GAC1CP,EAAA,MAAA,CACEC,MAAO,CACLmB,YAAahC,IAAU,OAASI,EAChC6B,kBAAmBjC,IAAU,MAAQI,EACrCI,IAAAA,EACA0B,OAAQR,EACRS,MAAO,KACPC,SAAUd,IAAS,aAGpBlB,GAAcL,EAAW+B,OAAAC,OAAAD,OAAAC,OAAA,GAAMZ,GAAK,CAAEX,IAAAA,KACtCY,GAEHI,GAAmBD,EACjBX,EAAA,MAAA,CAAKC,MAAM,OAAOE,GAAIM,KACjBG,EAAkBZ,EAAA,MAAA,CAAKC,MAAM,SAASY,GAAsB,GAC/Db,EAAA,MAAA,CAAKC,MAAM,UACTD,EAAA,OAAA,CAAMI,KAAK,aAET,WAOCqB,EAAqD,CAChElB,EACAC,KAEA,MAAMkB,aACJA,EAAYC,YACZA,EAAWC,SACXA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,IACPA,EAAGC,QACHA,EAAOC,aACPA,EAAYC,UACZA,GACE3B,EACJ,MAAM4B,EAAe,KACnBL,EAAQM,YAGV,OACEpC,EAAA,MAAA,CACEC,MAAM,oBACN8B,IAAMM,IACJ,GAAIN,EAAKA,EAAIM,KAGfrC,EAAA,OAAA,CAAMC,MAAM,SACVD,EAAA,OAAA,CAAMI,KAAK,UACV8B,GAEF1B,EACAkB,IAAiBE,IAAaC,GAC7B7B,EAAA,SAAA,CACEU,KAAK,SACLT,MAAM,wBACNqC,SAAS,KACTC,aAAcZ,EACda,YAAab,GAEb3B,EAAA,YAAA,CAAWI,KAAK,iBAGpBJ,EAAA,OAAA,CAAMC,MAAM,YAAYwC,QAASN,GAC/BnC,EAAA,OAAA,CAAMI,KAAK,cACV6B,GAEHjC,EAAA,OAAA,CAAMC,MAAM,OACVD,EAAA,OAAA,CAAMI,KAAK,QACV4B","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { TextFieldTypes } from '../../interface';\n\ninterface FormControlWrapProps {\n  rtl: boolean;\n  floatLabel: boolean;\n  labelId: string;\n  label: string;\n  moreId: string;\n  type?: TextFieldTypes;\n  showInlineError: boolean;\n  hasHelperSlot: boolean;\n  errorMessage: string;\n  controlId: string;\n  hasLabelSlot: boolean;\n  hideLabel: boolean;\n  placeholder: string;\n  hasValue: boolean;\n  showCharCount?: boolean;\n  maxlength?: number;\n  charCount?: number;\n}\n\ninterface FormControlProps {\n  clearControl: boolean;\n  onClearText?: () => void;\n  readonly: boolean;\n  disabled: boolean;\n  control: HTMLNanoInputElement | HTMLNanoSelectElement;\n  ref?: (elm?: HTMLElement) => void;\n  endSlot?: VNode;\n  endValueSlot?: VNode;\n  startSlot?: VNode;\n}\n\ninterface LabelProps extends FormControlWrapProps {\n  rtl: boolean;\n}\n\nconst renderLabel = ({\n  label,\n  hasLabelSlot,\n  controlId,\n  labelId,\n  floatLabel,\n  placeholder,\n  hideLabel,\n  hasValue,\n  rtl,\n  showCharCount,\n  maxlength,\n  charCount,\n}: LabelProps) => {\n  if (!label && !hasLabelSlot) return;\n  if (floatLabel) {\n    return (\n      <label class=\"placeholder-as-label\" htmlFor={controlId} id={labelId}>\n        {label && label}\n        {!label && hasLabelSlot && <slot name=\"label\" />}\n      </label>\n    );\n  } else {\n    return (\n      <label\n        class={{ label: true, 'visually-hide': hideLabel }}\n        htmlFor={controlId}\n        id={labelId}\n      >\n        <div class=\"label-placeholder\">\n          {placeholder && hasValue && rtl && (\n            <span class=\"placeholder\">{placeholder} / </span>\n          )}\n          <span class=\"labeltext\">\n            {label && label}\n            {!label && hasLabelSlot && <slot name=\"label\" />}\n          </span>\n          {placeholder && hasValue && !rtl && (\n            <span class=\"placeholder\"> / {placeholder}</span>\n          )}\n        </div>\n        {showCharCount && (\n          <span class=\"charcount\">\n            {maxlength\n              ? maxlength - charCount + ' left'\n              : charCount + ' characters'}\n          </span>\n        )}\n      </label>\n    );\n  }\n};\n\nexport const FormControlWrap: FunctionalComponent<FormControlWrapProps> = (\n  props: FormControlWrapProps,\n  children\n) => {\n  const {\n    rtl,\n    floatLabel,\n    label,\n    moreId,\n    type,\n    hasHelperSlot,\n    showInlineError,\n    errorMessage,\n  } = props;\n  const isLegacy = !document.head.attachShadow;\n\n  return [\n    !floatLabel ? renderLabel({ ...props }) : '',\n    <div\n      class={{\n        'has-label': label !== null && !floatLabel,\n        'has-float-label': label !== null && floatLabel,\n        rtl,\n        legacy: isLegacy,\n        input: true,\n        textarea: type === 'textarea',\n      }}\n    >\n      {floatLabel && renderLabel({ ...props, rtl })}\n      {children}\n    </div>,\n    showInlineError || hasHelperSlot ? (\n      <div class=\"more\" id={moreId}>\n        {!!showInlineError ? <div class=\"error\">{errorMessage}</div> : ''}\n        <div class=\"helper\">\n          <slot name=\"helper\" />\n        </div>\n      </div>\n    ) : (\n      ''\n    ),\n  ];\n};\n\nexport const FormControl: FunctionalComponent<FormControlProps> = (\n  props: FormControlProps,\n  children\n) => {\n  const {\n    clearControl,\n    onClearText,\n    readonly,\n    disabled,\n    control,\n    ref,\n    endSlot,\n    endValueSlot,\n    startSlot,\n  } = props;\n  const clickThrough = () => {\n    control.setFocus();\n  };\n\n  return (\n    <div\n      class=\"native-input-wrap\"\n      ref={(el) => {\n        if (ref) ref(el);\n      }}\n    >\n      <span class=\"start\">\n        <slot name=\"start\" />\n        {startSlot}\n      </span>\n      {children}\n      {clearControl && !readonly && !disabled && (\n        <button\n          type=\"button\"\n          class=\"icon input-clear-icon\"\n          tabindex=\"-1\"\n          onTouchStart={onClearText}\n          onMouseDown={onClearText}\n        >\n          <nano-icon name=\"light/times\"></nano-icon>\n        </button>\n      )}\n      <span class=\"value-end\" onClick={clickThrough}>\n        <slot name=\"value-end\" />\n        {endValueSlot}\n      </span>\n      <span class=\"end\">\n        <slot name=\"end\" />\n        {endSlot}\n      </span>\n    </div>\n  );\n};\n"]}

package/dist/nano-components/p-69439aa1.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,a,o){function n(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,i){function s(e){try{d(o.next(e))}catch(t){i(t)}}function r(e){try{d(o["throw"](e))}catch(t){i(t)}}function d(e){e.done?a(e.value):n(e.value).then(s,r)}d((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,n,i,s;return s={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function r(e){return function(t){return d([e,t])}}function d(s){if(o)throw new TypeError("Generator is already executing.");while(a)try{if(o=1,n&&(i=s[0]&2?n["return"]:s[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;if(n=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:a.label++;return{value:s[1],done:false};case 5:a.label++;n=s[1];s=[0];continue;case 7:s=a.ops.pop();a.trys.pop();continue;default:if(!(i=a.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){a=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){a.label=s[1];break}if(s[0]===6&&a.label<i[1]){a.label=i[1];i=s;break}if(i&&a.label<i[2]){a.label=i[2];a.ops.push(s);break}if(i[2])a.ops.pop();a.trys.pop();continue}s=t.call(e,a)}catch(r){s=[6,r];n=0}finally{o=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-e195ab77.system.js","./p-89edc042.system.js","./p-0784f2ad.system.js"],(function(e){"use strict";var t,a,o,n,i,s,r,d,l,c,u,h,f,b,p,v,y,g,_,m;return{setters:[function(e){t=e.h;a=e.r;o=e.c;n=e.e;i=e.g},function(e){s=e.b;r=e.D;d=e.i;l=e.p;c=e.d;u=e.s;h=e.e;f=e.f;b=e.g;p=e.h;v=e.j;y=e.k;g=e.a},function(e){_=e.c},function(e){m=e.f}],execute:function(){var x;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(x||(x={}));function D(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function w(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function k(e,t){if(t===void 0){t=x.Monday}var a=new Date(e);var o=a.getDay();var n=(o<t?7:0)+o-t;a.setDate(a.getDate()-n);return a}function M(e,t){if(t===void 0){t=x.Monday}var a=new Date(e);var o=a.getDay();var n=(o<t?-7:0)+6-(o-t);a.setDate(a.getDate()+n);return a}function S(e){return new Date(e.getFullYear(),e.getMonth(),1)}function F(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function T(e,t,a){return N(e,t,a)===e}function N(e,t,a){var o=e.getTime();if(t&&t instanceof Date&&o<t.getTime()){return t}if(a&&a instanceof Date&&o>a.getTime()){return a}return e}function Y(e,t){var a=[];var o=e;while(!D(o,t)){a.push(o);o=w(o,1)}a.push(o);return a}function z(e,t){if(t===void 0){t=x.Monday}var a=k(S(e),t);var o=M(F(e),t);return Y(a,o)}var C=function(e){var a=e.focusedDay,o=e.today,n=e.day,i=e.onDaySelect,s=e.onKeyboardNavigation,r=e.focusedDayRef,d=e.inRange,l=e.disabled,c=e.isSelected;var u=D(n,o);var h=D(n,a);var f=n.getMonth()!==a.getMonth()||l;var b=!d;function p(e){i(e,n)}return t("button",{class:{"duet-date__day":true,"is-outside":b,"is-disabled":f,"is-today":u},tabIndex:h?0:-1,onClick:p,onKeyDown:s,disabled:b,type:"button","aria-pressed":c?"true":"false",ref:function(e){if(h&&e&&r){r(e)}}},t("span",{"aria-hidden":"true"},n.getDate()),t("span",{class:"duet-date__vhidden"},n.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function I(e,t){var a=[];for(var o=0;o<e.length;o+=t){a.push(e.slice(o,o+t))}return a}function L(e,t,a){return e.map((function(o,n){var i=(n+t)%e.length;return a(e[i])}))}var O=function(e){var a=e.selectedDate,o=e.focusedDate,n=e.labelledById,i=e.localization,s=e.firstDayOfWeek,r=e.min,d=e.max,l=e.onDateSelect,c=e.onKeyboardNavigation,u=e.focusedDayRef,h=e.onMouseDown,f=e.onFocusIn,b=e.isDateDisabled;var p=new Date;var v=z(o,s);return t("table",{class:"duet-date__table",role:"grid","aria-labelledby":n,onFocusin:f,onMouseDown:h},t("thead",null,t("tr",null,L(i.dayNames,s,(function(e){return t("th",{class:"duet-date__table-header",scope:"col"},t("span",{"aria-hidden":"true"},e.substr(0,2)),t("span",{class:"duet-date__vhidden"},e))})))),t("tbody",null,I(v,7).map((function(e){return t("tr",{class:"duet-date__row"},e.map((function(e){return t("td",{class:"duet-date__cell",role:"gridcell","aria-selected":D(e,a)?"true":undefined},t(C,{day:e,today:p,focusedDay:o,inRange:T(e,r,d),onDaySelect:l,onKeyboardNavigation:c,focusedDayRef:u,disabled:b(e),isSelected:D(e,a)}))})))}))))};var W={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};var A=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';function j(e,t){var a=[];for(var o=e;o<=t;o++){a.push(o)}return a}var P=e("nano_date_picker",function(){function e(e){var t=this;a(this,e);this.nanoDatePicked=o(this,"nanoDatePicked",7);this.monthSelectId=s("NanoDateMonth");this.yearSelectId=s("NanoDateYear");this.dialogLabelId=s("NanoDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=r.Monday;this.localization=W;this.isDateDisabled=function(){return false};this.isModal=false;this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var o=a.pageX-t.initialTouchX;var n=a.pageY-t.initialTouchY;var i=70;var s=Math.abs(o)>=i&&Math.abs(n)<=i;if(s){t.addMonths(o<0?1:-1)}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleKeyboardNavigation=function(e){if(e.key==="Tab"&&!e.shiftKey&&t.isModal){e.preventDefault();var a=t.firstFocusEle||t.firstFocusableElement;a.focus();return}var o=true;switch(e.key){case"ArrowRight":t.addDays(1);break;case"ArrowLeft":t.addDays(-1);break;case"ArrowDown":t.addDays(7);break;case"ArrowUp":t.addDays(-7);break;case"PageUp":if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case"PageDown":if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case"Home":t.startOfWeek();break;case"End":t.endOfWeek();break;default:o=false}if(o){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){var o=!t.isDateDisabled(a);var n=d(a,l(t.min),l(t.max));if(!n||!o){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a)}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(e,t){if(e===void 0){e=false}if(t===void 0){t=false}return __awaiter(this,void 0,void 0,(function(){var a=this;return __generator(this,(function(o){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((function(e){return a.focusedDayNode.focus()}),20);return[2]}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){if(t)m.force(a.monthSelectNode);a.monthSelectNode.focus()}),20);return[2]}))}))};e.prototype.handleSelectedDateChange=function(){this.setFocus(true)};e.prototype.addDays=function(e){this.setFocusedDay(c(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))};e.prototype.endOfWeek=function(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))};e.prototype.setMonth=function(e){var t=f(b(this.focusedDay),e);var a=p(t);var o=f(this.focusedDay,e);this.setFocusedDay(v(o,t,a))};e.prototype.setYear=function(e){var t=y(b(this.focusedDay),e);var a=p(t);var o=y(this.focusedDay,e);this.setFocusedDay(v(o,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=v(e,l(this.min),l(this.max))};e.prototype.setValue=function(e){this.selectedDate=g(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})};e.prototype.connectedCallback=function(){if(this.yearSelectNode)m.observe(this.yearSelectNode);if(this.monthSelectNode)m.observe(this.monthSelectNode)};e.prototype.componentWillLoad=function(){this.handleSelectedDateChange()};e.prototype.componentDidLoad=function(){this.connectedCallback()};e.prototype.disconnectedCallback=function(){m.unobserve(this.yearSelectNode);m.unobserve(this.monthSelectNode)};e.prototype.render=function(){var e=this;var a=l(this.selectedDate);var o=(a||this.focusedDay).getFullYear();var i=this.focusedDay.getMonth();var s=this.focusedDay.getFullYear();var r=l(this.min);var c=l(this.max);var u=r!=null&&r.getMonth()===i&&r.getFullYear()===s;var h=c!=null&&c.getMonth()===i&&c.getFullYear()===s;var f=o-10;var v=o+10;if(r)f=r.getFullYear();if(c)v=c.getFullYear();return t(n,{class:Object.assign({},_(this.color))},t("div",{class:"duet-date"},t("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"duet-date__dialog-content"},t("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),t("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},t("div",null,t("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[i]," ",this.focusedDay.getFullYear()),t("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:function(t){return e.firstFocusableElement=e.monthSelectNode=t},onChange:this.handleMonthSelect},this.localization.monthNames.map((function(e,a){return t("option",{key:e,value:a,selected:a===i,disabled:!d(new Date(s,a,1),r?b(r):null,c?p(c):null)},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.localization.monthNamesShort[i]),t("nano-icon",{name:"light/chevron-down"}))),t("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:function(t){return e.yearSelectNode=t}},j(f,v).map((function(e){return t("option",{key:e,selected:e===s},e)}))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.focusedDay.getFullYear()),t("nano-icon",{name:"light/chevron-down"})))),t("div",{class:"duet-date__nav"},t("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:u,type:"button"},t("nano-icon",{name:"light/chevron-left"}),t("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),t("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},t("nano-icon",{name:"light/chevron-right"}),t("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),t("div",null,t(O,{selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:r,max:c,isDateDisabled:this.isDateDisabled}))))))};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selectedDate:["handleSelectedDateChange"]}},enumerable:false,configurable:true});return e}());P.style=A}}}));
+//# sourceMappingURL=p-69439aa1.system.entry.js.map

package/dist/nano-components/p-69439aa1.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-picker/duet-date-picker/date-utils.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","startOfWeek","firstDayOfWeek","Monday","day","getDay","diff","endOfWeek","startOfMonth","endOfMonth","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerDay","_a","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","isSelected","isToday","isFocused","isDisabled","isOutsideRange","handleClick","e","h","class","duet-date__day","is-outside","is-disabled","is-today","tabIndex","onClick","onKeyDown","type","aria-pressed","ref","el","aria-hidden","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","localization","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","role","aria-labelledby","onFocusin","dayNames","dayName","scope","substr","week","aria-selected","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","datePickerCss","range","from","to","DatePicker","exports","class_1","hostRef","_this","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","activeFocus","defaultLocalization","isModal","enableActiveFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","ele","firstFocusEle","firstFocusableElement","focus","handled","addYears","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","prototype","setFocus","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","handleSelectedDateChange","months","years","year","printISODate","nanoDatePicked","emit","valueAsDate","connectedCallback","yearSelectNode","observe","componentWillLoad","componentDidLoad","disconnectedCallback","unobserve","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","Host","Object","assign","createColorClasses","color","duet-date__dialog","is-active","onTouchMove","onTouchStart","onTouchEnd","aria-live","id","htmlFor","onChange","selected","name"],"mappings":"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","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\nexport function createDate(year: string, month: string, day: string): Date {\n  var dayInt = parseInt(day, 10);\n  var monthInt = parseInt(month, 10);\n  var yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n */\nexport function parseISODate(value: string): Date {\n  if (!value) {\n    return;\n  }\n\n  const matches = value.match(ISO_DATE_FORMAT);\n\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return '';\n  }\n\n  var d = date.getDate().toString(10);\n  var m = (date.getMonth() + 1).toString(10);\n  var y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n\n  return date;\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random().toString(16).slice(-4);\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\n}\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from './date-utils';\n\nexport type DatePickerDayProps = {\n  focusedDay: Date;\n  today: Date;\n  day: Date;\n  inRange: boolean;\n  disabled: boolean;\n  onDaySelect: (event: MouseEvent, day: Date) => void;\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\n  focusedDayRef?: (element: HTMLButtonElement) => void;\n  isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  inRange,\n  disabled,\n  isSelected,\n}) => {\n  const isToday = isEqual(day, today);\n  const isFocused = isEqual(day, focusedDay);\n  const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;\n  const isOutsideRange = !inRange;\n\n  function handleClick(e) {\n    onDaySelect(e, day);\n  }\n\n  return (\n    <button\n      class={{\n        'duet-date__day': true,\n        'is-outside': isOutsideRange,\n        'is-disabled': isDisabled,\n        'is-today': isToday,\n      }}\n      tabIndex={isFocused ? 0 : -1}\n      onClick={handleClick}\n      onKeyDown={onKeyboardNavigation}\n      disabled={isOutsideRange}\n      type=\"button\"\n      aria-pressed={isSelected ? 'true' : 'false'}\n      ref={(el) => {\n        if (isFocused && el && focusedDayRef) {\n          focusedDayRef(el);\n        }\n      }}\n    >\n      <span aria-hidden=\"true\">{day.getDate()}</span>\n      <span class=\"duet-date__vhidden\">\n        {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n      </span>\n    </button>\n  );\n};\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { DuetLocalizedText } from './date-localization';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from './date-utils';\nimport { DateDisabledPredicate } from '../../../interface';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n  const result = [];\n\n  for (let i = 0; i < array.length; i += chunkSize) {\n    result.push(array.slice(i, i + chunkSize));\n  }\n\n  return result;\n}\n\nfunction mapWithOffset<T, U>(\n  array: T[],\n  startingOffset: number,\n  mapFn: (item: T) => U\n): U[] {\n  return array.map((_, i) => {\n    const adjustedIndex = (i + startingOffset) % array.length;\n    return mapFn(array[adjustedIndex]);\n  });\n}\n\ntype DatePickerMonthProps = {\n  selectedDate: Date;\n  focusedDate: Date;\n  labelledById: string;\n  localization: DuetLocalizedText;\n  firstDayOfWeek: DaysOfWeek;\n  min?: Date;\n  max?: Date;\n  onDateSelect: DatePickerDayProps['onDaySelect'];\n  onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n  focusedDayRef: (element: HTMLButtonElement) => void;\n  onFocusIn?: (e: FocusEvent) => void;\n  onMouseDown?: (e: MouseEvent) => void;\n  isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  onDateSelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  onMouseDown,\n  onFocusIn,\n  isDateDisabled,\n}) => {\n  const today = new Date();\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n  return (\n    <table\n      class=\"duet-date__table\"\n      role=\"grid\"\n      aria-labelledby={labelledById}\n      // @ts-ignore\n      onFocusin={onFocusIn}\n      onMouseDown={onMouseDown}\n    >\n      <thead>\n        <tr>\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n            <th class=\"duet-date__table-header\" scope=\"col\">\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n              <span class=\"duet-date__vhidden\">{dayName}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {chunk(days, 7).map((week) => (\n          <tr class=\"duet-date__row\">\n            {week.map((day) => (\n              <td\n                class=\"duet-date__cell\"\n                role=\"gridcell\"\n                aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n              >\n                <DatePickerDay\n                  day={day}\n                  today={today}\n                  focusedDay={focusedDate}\n                  inRange={inRange(day, min, max)}\n                  onDaySelect={onDateSelect}\n                  onKeyboardNavigation={onKeyboardNavigation}\n                  focusedDayRef={focusedDayRef}\n                  disabled={isDateDisabled(day)}\n                  isSelected={isEqual(day, selectedDate)}\n                />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n","type MonthsNames = [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n  buttonLabel: string;\n  placeholder: string;\n  selectedDateMessage: string;\n  prevMonthLabel: string;\n  nextMonthLabel: string;\n  monthSelectLabel: string;\n  yearSelectLabel: string;\n  closeLabel: string;\n  keyboardInstruction: string;\n  calendarHeading: string;\n  dayNames: DayNames;\n  monthNames: MonthsNames;\n  monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n  buttonLabel: 'Choose date',\n  placeholder: 'YYYY-MM-DD',\n  selectedDateMessage: 'Selected date is',\n  prevMonthLabel: 'Previous month',\n  nextMonthLabel: 'Next month',\n  monthSelectLabel: 'Month',\n  yearSelectLabel: 'Year',\n  closeLabel: 'Close window',\n  keyboardInstruction: 'You can use arrow keys to navigate dates',\n  calendarHeading: 'Choose a date',\n  dayNames: [\n    'Sunday',\n    'Monday',\n    'Tuesday',\n    'Wednesday',\n    'Thursday',\n    'Friday',\n    'Saturday',\n  ],\n  monthNames: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  monthNamesShort: [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n};\n\nexport default localization;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --background: defaults to #{$layer-bg-color}\n   * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n   * @prop --active-text-color: defaults to  var(--nano-color-contrast, #{nano-color(primary, contrast)})\n   * @prop --focus-shadow: defaults to  #{$control-focus-style}\n   * @prop --inactive-color: defaults to #{$button-bg-color}\n   */\n\n  --background: #{$layer-bg-color};\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --focus-shadow: #{$control-focus-style};\n  --inactive-color: #{$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\n\n:host(.nano-color) {\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color: #{current-color(contrast)};\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date *,\n.duet-date *::before,\n.duet-date *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.duet-date {\n  box-sizing: border-box;\n  color: currentColor;\n  display: block;\n  margin: 0;\n  position: relative;\n  text-align: left;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  top: 100%;\n  max-width: 100%;\n  width: 100%;\n\n  &.is-left {\n    left: auto;\n    right: 0;\n    width: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-width: 290px;\n  padding: 16px 16px 20px;\n  position: relative;\n  transform: none;\n  max-width: 100%;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: 1em;\n  line-height: 1.25;\n  text-align: center;\n  width: 100%;\n}\n\n.duet-date__table-header {\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: 1px;\n  line-height: 1.25;\n  padding-bottom: 8px;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.duet-date__cell {\n  text-align: center;\n}\n\n.duet-date__day {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-block;\n  font-size: 0.875em;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.25;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  z-index: 1;\n  transition: 0.15s ease all;\n  height: 2.5em;\n  width: 2.5em;\n\n  &.is-today {\n    box-shadow: 0 0 0 1px var(--active-color);\n    position: relative;\n  }\n\n  &:hover::before,\n  &.is-today::before {\n    content: '';\n    background: var(--active-color);\n    border-radius: 50%;\n    bottom: 0;\n    left: 0;\n    opacity: 0.16;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color);\n    color: var(--active-text-color);\n    box-shadow: none;\n    outline: 0;\n  }\n\n  &:active {\n    background: var(--active-color);\n    box-shadow: var(--focus-shadow);\n    color: var(--active-text-color);\n  }\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &.is-disabled {\n    background: transparent;\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.5;\n\n    &::before {\n      display: none;\n    }\n  }\n\n  &.is-outside {\n    background: var(--inactive-color);\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.6;\n    pointer-events: none;\n\n    &::before {\n      display: none;\n    }\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n  white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n  background: var(--inactive-color);\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  align-items: center;\n  appearance: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: space-around;\n  margin-left: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  height: 2.2em;\n  width: 2.2em;\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &:active:focus {\n    box-shadow: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  nano-icon {\n    margin: 0 auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-top: 4px;\n  position: relative;\n\n  span {\n    @include margin(null, 4px, null, null);\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 2;\n\n    &.focus-visible:focus + .duet-date__select-label {\n      box-shadow: var(--focus-shadow);\n    }\n  }\n}\n\n.duet-date__select-label {\n  align-items: center;\n  border-radius: 4px;\n  display: flex;\n  font-size: 1.25em;\n  font-weight: 600;\n  line-height: 1.25;\n  padding: 0 4px 0 8px;\n  pointer-events: none;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n\n  nano-icon {\n    font-size: 0.55em;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  clamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  createIdentifier,\n  DaysOfWeek,\n} from '../../utils/date-utils';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport defaultLocalization from './duet-date-picker/date-localization';\n\nimport {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nfunction range(from: number, to: number) {\n  var result: number[] = [];\n  for (var i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\n/**\n * A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n */\n@Component({\n  tag: 'nano-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n  private monthSelectId = createIdentifier('NanoDateMonth');\n  private yearSelectId = createIdentifier('NanoDateYear');\n  private dialogLabelId = createIdentifier('NanoDateLabel');\n\n  private firstFocusableElement: HTMLElement;\n  private monthSelectNode: HTMLElement;\n  private yearSelectNode: HTMLElement;\n  private focusedDayNode: HTMLButtonElement;\n\n  private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  @Element() host: HTMLNanoDatePickerElement;\n\n  @State() activeFocus = false;\n  @State() focusedDay = new Date();\n\n  // Public Property API\n\n  /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */\n  @Prop({ mutable: true }) selectedDate: string = '';\n\n  /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property. */\n  @Prop() min: string = '';\n\n  /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property. */\n  @Prop() max: string = '';\n\n  /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday. */\n  @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n  /** Button labels, day names, month names, etc, used for localization.\n   * Default is English. */\n  @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n  /** The color to use from the application's color palette. */\n  @Prop() color?: Color;\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends. */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  /** Controls whether the picker is a modal or dialog,\n   * popup control and will therefore keep focus within the control */\n  @Prop() isModal: boolean = false;\n\n  /** @internal First focusable element. Relevant for keeping focus within the control */\n  @Prop() firstFocusEle: HTMLElement;\n\n  // Events\n\n  /** Event emitted when a date is selected. */\n  @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n  // Public methods API\n\n  /** Focus to the calendar\n   * @param day - focus to the current selected day\n   * @param forceFocusVisible - force visible focus - required if opened via keyboad\n   */\n  @Method()\n  async setFocus(day = false, forceFocusVisible = false) {\n    this.setFocusedDay(parseISODate(this.selectedDate) || new Date());\n\n    if (day) {\n      setTimeout((_) => this.focusedDayNode.focus(), 20);\n      return;\n    }\n    clearTimeout(this.focusTimeoutId);\n    this.focusTimeoutId = setTimeout(() => {\n      if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n      this.monthSelectNode.focus();\n    }, 20);\n  }\n\n  @Watch('selectedDate')\n  handleSelectedDateChange() {\n    this.setFocus(true);\n  }\n\n  // Local methods.\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true;\n  };\n\n  private disableActiveFocus = () => {\n    this.activeFocus = false;\n  };\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days));\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months);\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years);\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month);\n    const max = endOfMonth(min);\n    const date = setMonth(this.focusedDay, month);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year);\n    const max = endOfMonth(min);\n    const date = setYear(this.focusedDay, year);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\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 handleTouchMove = (event: TouchEvent) => {\n    event.preventDefault();\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    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    if (isHorizontalSwipe) {\n      this.addMonths(distX < 0 ? 1 : -1);\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(1);\n  };\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(-1);\n  };\n\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\n    // handle tab separately, since it needs to be treated\n    // differently to other keyboard interactions\n    if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n      event.preventDefault();\n      let ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    var handled = true;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this.addDays(1);\n        break;\n      case 'ArrowLeft':\n        this.addDays(-1);\n        break;\n      case 'ArrowDown':\n        this.addDays(7);\n        break;\n      case 'ArrowUp':\n        this.addDays(-7);\n        break;\n      case 'PageUp':\n        if (event.shiftKey) {\n          this.addYears(-1);\n        } else {\n          this.addMonths(-1);\n        }\n        break;\n      case 'PageDown':\n        if (event.shiftKey) {\n          this.addYears(1);\n        } else {\n          this.addMonths(1);\n        }\n        break;\n      case 'Home':\n        this.startOfWeek();\n        break;\n      case 'End':\n        this.endOfWeek();\n        break;\n      default:\n        handled = false;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this.enableActiveFocus();\n    }\n  };\n\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\n    const isAllowed = !this.isDateDisabled(day);\n    const isInRange = inRange(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n\n    if (!isInRange || !isAllowed) {\n      return;\n    }\n\n    if (day.getMonth() === this.focusedDay.getMonth()) {\n      this.setValue(day);\n    } else {\n      this.setFocusedDay(day);\n    }\n  };\n\n  private handleMonthSelect = (e) => {\n    this.setMonth(parseInt(e.target.value, 10));\n  };\n\n  private handleYearSelect = (e) => {\n    this.setYear(parseInt(e.target.value, 10));\n  };\n\n  private setValue(date: Date) {\n    this.selectedDate = printISODate(date);\n    this.nanoDatePicked.emit({\n      value: this.selectedDate,\n      valueAsDate: date,\n    });\n  }\n\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\n    this.focusedDayNode = element;\n\n    if (this.activeFocus) {\n      setTimeout(() => element.focus(), 0);\n    }\n  };\n\n  connectedCallback() {\n    if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n    if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n  }\n\n  componentWillLoad() {\n    this.handleSelectedDateChange();\n  }\n\n  componentDidLoad() {\n    this.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.yearSelectNode);\n    focusVisible.unobserve(this.monthSelectNode);\n  }\n\n  render() {\n    const valueAsDate = parseISODate(this.selectedDate);\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\n    const focusedMonth = this.focusedDay.getMonth();\n    const focusedYear = this.focusedDay.getFullYear();\n\n    const minDate = parseISODate(this.min);\n    const maxDate = parseISODate(this.max);\n    const prevMonthDisabled =\n      minDate != null &&\n      minDate.getMonth() === focusedMonth &&\n      minDate.getFullYear() === focusedYear;\n    const nextMonthDisabled =\n      maxDate != null &&\n      maxDate.getMonth() === focusedMonth &&\n      maxDate.getFullYear() === focusedYear;\n\n    let minYear = selectedYear - 10;\n    let maxYear = selectedYear + 10;\n    if (minDate) minYear = minDate.getFullYear();\n    if (maxDate) maxYear = maxDate.getFullYear();\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"duet-date\">\n          <div\n            class={{\n              'duet-date__dialog': true,\n              'is-active': true,\n            }}\n            onTouchMove={this.handleTouchMove}\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <div class=\"duet-date__dialog-content\">\n              <div\n                class=\"duet-date__vhidden duet-date__instructions\"\n                aria-live=\"polite\"\n              >\n                {this.localization.keyboardInstruction}\n              </div>\n              {/**\n               * With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n               * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n               * here which is wrong for the TS types, but ends up with the correct event listener\n               * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n               */}\n              {/* @ts-ignore */}\n              <div\n                class=\"duet-date__header\"\n                onFocusin={this.disableActiveFocus}\n              >\n                <div>\n                  <h2\n                    id={this.dialogLabelId}\n                    class=\"duet-date__vhidden\"\n                    aria-live=\"polite\"\n                  >\n                    {this.localization.monthNames[focusedMonth]}{' '}\n                    {this.focusedDay.getFullYear()}\n                  </h2>\n                  <label\n                    htmlFor={this.monthSelectId}\n                    class=\"duet-date__vhidden\"\n                  >\n                    {this.localization.monthSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.monthSelectId}\n                      class=\"duet-date__select--month\"\n                      ref={(element) =>\n                        (this.firstFocusableElement = this.monthSelectNode =\n                          element)\n                      }\n                      onChange={this.handleMonthSelect}\n                    >\n                      {this.localization.monthNames.map((month, i) => (\n                        <option\n                          key={month}\n                          value={i}\n                          selected={i === focusedMonth}\n                          disabled={\n                            !inRange(\n                              new Date(focusedYear, i, 1),\n                              minDate ? startOfMonth(minDate) : null,\n                              maxDate ? endOfMonth(maxDate) : null\n                            )\n                          }\n                        >\n                          {month}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>\n                        {this.localization.monthNamesShort[focusedMonth]}\n                      </span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n\n                  <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n                    {this.localization.yearSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.yearSelectId}\n                      class=\"duet-date__select--year\"\n                      onChange={this.handleYearSelect}\n                      ref={(element) => (this.yearSelectNode = element)}\n                    >\n                      {range(minYear, maxYear).map((year) => (\n                        <option key={year} selected={year === focusedYear}>\n                          {year}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>{this.focusedDay.getFullYear()}</span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"duet-date__nav\">\n                  <button\n                    class=\"duet-date__prev\"\n                    onClick={this.handlePreviousMonthClick}\n                    disabled={prevMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-left\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.prevMonthLabel}\n                    </span>\n                  </button>\n                  <button\n                    class=\"duet-date__next\"\n                    onClick={this.handleNextMonthClick}\n                    disabled={nextMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-right\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.nextMonthLabel}\n                    </span>\n                  </button>\n                </div>\n              </div>\n              <div>\n                <DatePickerMonth\n                  selectedDate={valueAsDate}\n                  focusedDate={this.focusedDay}\n                  onDateSelect={this.handleDaySelect}\n                  onKeyboardNavigation={this.handleKeyboardNavigation}\n                  labelledById={this.dialogLabelId}\n                  localization={this.localization}\n                  firstDayOfWeek={this.firstDayOfWeek}\n                  focusedDayRef={this.processFocusedDayNode}\n                  min={minDate}\n                  max={maxDate}\n                  isDateDisabled={this.isDateDisabled}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-6ade3290.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as a,e,g as r}from"./p-ab5813a7.js";const n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:opacity 0.3s ease-in-out forwards;animation:opacity 0.3s ease-in-out forwards;opacity:1}@media only screen and (max-width: 768px){:host([animation-dir=left]){-webkit-animation:slide-right 0.3s ease-in-out;animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){-webkit-animation:slide-left 0.3s ease-in-out;animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@-webkit-keyframes opacity{0%{opacity:0}100%{opacity:100%}}@keyframes opacity{0%{opacity:0}100%{opacity:100%}}@-webkit-keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none !important;animation:none !important}}";let s=0;let i=class{constructor(a){t(this,a);this.tabContentId=`nano-tab-content-${++s}`;this.name="";this.active=false}render(){return a(e,{id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true"},a("div",{part:"base",class:"nano-tab-content"},a("slot",null)))}get host(){return r(this)}};i.style=n;export{i as nano_tab_content};
+//# sourceMappingURL=p-6ade3290.entry.js.map

package/dist/nano-components/{p-1e03f9bf.entry.js.map → p-6ade3290.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"names":["tabContentCss","id","TabPanel","[object Object]","hostRef","this","tabContentId","name","active","h","Host","host","style","display","role","aria-hidden","part","class"],"mappings":";;;oDAAA,MAAMA,EAAgB,u9DCStB,IAAIC,EAAK,MAUIC,EAAQ,MALrBC,YAAAC,aAMUC,KAAAC,aAAe,sBAAsBL,IAKrCI,KAAAE,KAAO,GAGPF,KAAAG,OAAS,MAEjBL,SACE,OACEM,EAACC,EAAI,CACHT,GAAII,KAAKM,KAAKV,IAAMI,KAAKC,aACzBM,MAAO,CAAEC,QAASR,KAAKG,OAAS,QAAU,QAC1CM,KAAK,WAAUC,cACFV,KAAKG,OAAS,QAAU,QAErCC,EAAA,MAAA,CAAKO,KAAK,OAAOC,MAAM,6BACrBR,EAAA,OAAA","sourcesContent":[":host {\n  display: block;\n  transform: translate3d(0, 0, 0);\n  animation: opacity 0.3s ease-in-out forwards;\n  opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 100%;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop() active = false;\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n      >\n        <div part=\"base\" class=\"nano-tab-content slide-in\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"names":["tabContentCss","id","TabPanel","[object Object]","hostRef","this","tabContentId","name","active","h","Host","host","style","display","role","aria-hidden","part","class"],"mappings":";;;oDAAA,MAAMA,EAAgB,w/DCStB,IAAIC,EAAK,MAUIC,EAAQ,MALrBC,YAAAC,aAMUC,KAAAC,aAAe,sBAAsBL,IAKpBI,KAAAE,KAAO,GAGPF,KAAAG,OAAS,MAElCL,SACE,OACEM,EAACC,EAAI,CACHT,GAAII,KAAKM,KAAKV,IAAMI,KAAKC,aACzBM,MAAO,CAAEC,QAASR,KAAKG,OAAS,QAAU,QAC1CM,KAAK,WAAUC,cACFV,KAAKG,OAAS,QAAU,QAErCC,EAAA,MAAA,CAAKO,KAAK,OAAOC,MAAM,oBACrBR,EAAA,OAAA","sourcesContent":[":host {\n  display: block;\n  transform: translate3d(0, 0, 0);\n  animation: opacity 0.3s ease-in-out forwards;\n  opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 100%;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop({ reflect: true }) name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n      >\n        <div part=\"base\" class=\"nano-tab-content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-70dec19f.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as e,c as t,h as i,e as o}from"./p-ab5813a7.js";const n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;min-height:100%;font-size:18px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-webkit-transition:opacity 0.2s;transition:opacity 0.2s;opacity:0}:host([ready]){opacity:1}";let s=class{constructor(i){e(this,i);this.nanoSlideReady=t(this,"nanoSlideReady",7);this.ready=null}readyChange(e,t){if(typeof t!=="undefined"&&t===false&&e===true){this.nanoSlideReady.emit()}}componentDidLoad(){if(typeof this.ready==="boolean")return;setTimeout((()=>{this.nanoSlideReady.emit();this.ready=true}))}render(){return i(o,null,i("slot",null))}static get watchers(){return{ready:["readyChange"]}}};s.style=n;export{s as nano_slide};
+//# sourceMappingURL=p-70dec19f.entry.js.map

package/dist/nano-components/{p-d0e9b177.entry.js.map → p-70dec19f.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"names":["slideCss","Slide","[object Object]","hostRef","this","ready","newReady","oldReady","nanoSlideReady","emit","setTimeout","h","Host"],"mappings":";;;yDAAA,MAAMA,EAAW,0lBCgBJC,EAAK,MALlBC,YAAAC,4DAe0CC,KAAAC,MAAwB,KAGhEH,YAAYI,EAA0BC,GACpC,UACSA,IAAa,aACpBA,IAAa,OACbD,IAAa,KACb,CACAF,KAAKI,eAAeC,QAIxBP,mBAEE,UAAWE,KAAKC,QAAU,UAAW,OACrCK,YAAW,KACTN,KAAKI,eAAeC,OACpBL,KAAKC,MAAQ,QAIjBH,SACE,OACES,EAACC,EAAI,KACHD,EAAA,OAAA","sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  position: relative;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"names":["slideCss","Slide","[object Object]","hostRef","this","ready","newReady","oldReady","nanoSlideReady","emit","setTimeout","h","Host"],"mappings":";;;yDAAA,MAAMA,EAAW,2nBCgBJC,EAAK,MALlBC,YAAAC,4DAe0CC,KAAAC,MAAwB,KAGhEH,YAAYI,EAA0BC,GACpC,UACSA,IAAa,aACpBA,IAAa,OACbD,IAAa,KACb,CACAF,KAAKI,eAAeC,QAIxBP,mBAEE,UAAWE,KAAKC,QAAU,UAAW,OACrCK,YAAW,KACTN,KAAKI,eAAeC,OACpBL,KAAKC,MAAQ,QAIjBH,SACE,OACES,EAACC,EAAI,KACHD,EAAA,OAAA","sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  position: relative;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  min-height: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-7232c046.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js"],(function(t){"use strict";var e,o;return{setters:[function(t){e=t.r;o=t.h}],execute:function(){var i=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block}.aspect-ratio{position:relative}.aspect-ratio ::slotted(*){position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important}.aspect-ratio--cover ::slotted(embed),.aspect-ratio--cover ::slotted(iframe),.aspect-ratio--cover ::slotted(img),.aspect-ratio--cover ::slotted(video){-o-object-fit:cover !important;object-fit:cover !important}.aspect-ratio--contain ::slotted(embed),.aspect-ratio--contain ::slotted(iframe),.aspect-ratio--contain ::slotted(img),.aspect-ratio--contain ::slotted(video){-o-object-fit:contain !important;object-fit:contain !important}";var a=t("nano_aspect_ratio",function(){function t(t){var o=this;e(this,t);this.aspectRatio="16:9";this.fit="cover";this.handleSlotChange=function(){o.setAspectRatio()}}t.prototype.handleAspectRatioChange=function(){this.setAspectRatio()};t.prototype.setAspectRatio=function(){if(typeof this.aspectRatio!=="string"){console.warn("aspectRatio should be a string.");return}else if(!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)){console.warn('aspectRatio is an incorrect format. Should be e.g. "16:9"');return}var t=this.aspectRatio.split(":");var e=parseInt(t[0]);var o=parseInt(t[1]);this.base.style.paddingBottom=e&&o?o/e*100+"%":null};t.prototype.render=function(){var t=this;return o("div",{ref:function(e){return t.base=e},part:"base",class:{"aspect-ratio":true,"aspect-ratio--cover":this.fit==="cover","aspect-ratio--contain":this.fit==="contain"}},o("slot",{onSlotchange:this.handleSlotChange}))};Object.defineProperty(t,"watchers",{get:function(){return{aspectRatio:["handleAspectRatioChange"]}},enumerable:false,configurable:true});return t}());a.style=i}}}));
+//# sourceMappingURL=p-7232c046.system.entry.js.map

package/dist/nano-components/{p-92b3f99b.system.entry.js.map → p-7232c046.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRatio","exports","class_1","hostRef","_this","this","aspectRatio","fit","handleSlotChange","setAspectRatio","prototype","handleAspectRatioChange","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":";;;0IAAA,IAAMA,EAAiB,svBCaVC,EAAWC,EAAA,oBAAA,WALxB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAUUA,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,WACzBJ,EAAKK,kBALPP,EAAAQ,UAAAC,wBAAA,WACEN,KAAKI,kBAOCP,EAAAQ,UAAAD,eAAA,WACN,UAAWJ,KAAKC,cAAgB,SAAU,CACxCM,QAAQC,KAAK,mCACb,YACK,IAAKR,KAAKC,YAAYQ,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,OAEF,IAAME,EAAQV,KAAKC,YAAYS,MAAM,KACrC,IAAMC,EAAIC,SAASF,EAAM,IACzB,IAAMG,EAAID,SAASF,EAAM,IACzBV,KAAKc,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAG,IAAM,MAGjEd,EAAAQ,UAAAY,OAAA,WAAA,IAAAlB,EAAAC,KACE,OACEkB,EAAA,MAAA,CACEC,IAAK,SAACC,GAAE,OAAMrB,EAAKe,KAAOM,GAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBxB,KAAKE,MAAQ,QACpCuB,wBAAyBzB,KAAKE,MAAQ,YAGxCgB,EAAA,OAAA,CAAMQ,aAAc1B,KAAKG,uKA5CT","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRatio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRatio","exports","class_1","hostRef","_this","this","aspectRatio","fit","handleSlotChange","setAspectRatio","prototype","handleAspectRatioChange","console","warn","match","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":";;;0IAAA,IAAMA,EAAiB,uxBCaVC,EAAWC,EAAA,oBAAA,WALxB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAUUA,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,WACzBJ,EAAKK,kBALPP,EAAAQ,UAAAC,wBAAA,WACEN,KAAKI,kBAOCP,EAAAQ,UAAAD,eAAA,WACN,UAAWJ,KAAKC,cAAgB,SAAU,CACxCM,QAAQC,KAAK,mCACb,YACK,IAAKR,KAAKC,YAAYQ,MAAM,qBAAsB,CACvDF,QAAQC,KAAK,6DACb,OAEF,IAAME,EAAQV,KAAKC,YAAYS,MAAM,KACrC,IAAMC,EAAIC,SAASF,EAAM,IACzB,IAAMG,EAAID,SAASF,EAAM,IACzBV,KAAKc,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAG,IAAM,MAGjEd,EAAAQ,UAAAY,OAAA,WAAA,IAAAlB,EAAAC,KACE,OACEkB,EAAA,MAAA,CACEC,IAAK,SAACC,GAAE,OAAMrB,EAAKe,KAAOM,GAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBxB,KAAKE,MAAQ,QACpCuB,wBAAyBzB,KAAKE,MAAQ,YAGxCgB,EAAA,OAAA,CAAMQ,aAAc1B,KAAKG,uKA5CT","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRatio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    if (typeof this.aspectRatio !== 'string') {\n      console.warn('aspectRatio should be a string.');\n      return;\n    } else if (!this.aspectRatio.match(/^([0-9]+:[0-9]+)$/)) {\n      console.warn('aspectRatio is an incorrect format. Should be e.g. \"16:9\"');\n      return;\n    }\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-730f60ea.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as o,c as a,h as i,e as t,g as e}from"./p-ab5813a7.js";import{l as s,u as r}from"./p-1805d59a.js";import{M as n}from"./p-cb79d1ec.js";import{h as l}from"./p-8971a867.js";import{C as d}from"./p-5a0095f9.js";import"./p-b619500f.js";import"./p-9a385481.js";import"./p-69a3e911.js";import"./p-1da5f8df.js";const h=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}: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.2));--close-button-color:#b5aea7;--width:60rem;--tint-color:#00607b;--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}.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;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}";let b=0;let c=class{constructor(i){o(this,i);this.nanoShow=a(this,"nanoShow",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRequestClose=a(this,"nanoRequestClose",7);this.componentId=`dialog-${++b}`;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.noHeader=false;this.noFooter=false;this.noUserDismiss=false;this.storeMethod="url-hash";this.handleKeyDown=o=>{if(o.key==="Escape"){this.requestClose()}};this.requestClose=()=>{const o=this.nanoRequestClose.emit();if(!o.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((o=>this.noDismiss=false),250)}};this.handleTransitionEnd=o=>{if(o.propertyName==="opacity"&&o.composedPath().find((o=>o===this.panel||o===this.overlay))){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")}}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.willShow){return}const o=this.nanoShow.emit();if(o.defaultPrevented){this.open=false;return}this.originalTrigger=document.activeElement;this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const o=this.nanoInitialFocus.emit();if(!o.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const o=this.nanoHide.emit();if(o.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();r(this.host);this.stopVideos();const a=this.originalTrigger;if(a&&typeof a.focus==="function"){setTimeout((()=>a.focus()))}}stopVideos(){var o=Array.from(this.host.querySelectorAll("iframe,video"));o.forEach((o=>{if(o.tagName.toLowerCase()==="video")o.pause();else{const a=o.src;o.src=a}}))}connectedCallback(){this.modal=new n(this.host);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)d.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}}disconnectedCallback(){r(this.host);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return i(t,{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:o=>this.overlay=o,onClick:this.requestClose}),i("div",{ref:o=>this.panel=o,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")))))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=h;export{c as nano_dialog};
+//# sourceMappingURL=p-730f60ea.entry.js.map