@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/{p-fb7ae92c.entry.js → p-a53a193c.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,c as s,h as t,e,g as r}from"./p-f55560d3.js";import{c as i}from"./p-d3af43d2.js";import{g as n}from"./p-a0ddf496.js";let a=class{constructor(t){o(this,t),this.nanoToggle=s(this,"nanoToggle",7)}onToggleHandler(o){o.stopPropagation(),(n(this.el,"nano-details")||this.el.querySelectorAll("nano-details")).forEach(((s,t)=>{s!==o.target?s.open=!1:this.itemOpened=t})),this.nanoToggle.emit()}onClosedHandler(o){o.stopPropagation(),this.itemOpened=null,this.nanoToggle.emit()}render(){return t(e,{class:Object.assign(Object.assign({},i(this.color)),{[`nano-color-${this.itemOpened}`]:"number"==typeof this.itemOpened})},t("slot",null))}connectedCallback(){}get el(){return r(this)}};a.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}";export{a as nano_accordion}
-//# sourceMappingURL=p-fb7ae92c.entry.js.map
+import{r as o,c as s,h as t,e,g as r}from"./p-bb0619e6.js";import{c as i}from"./p-d3af43d2.js";import{g as n}from"./p-a0ddf496.js";let a=class{constructor(t){o(this,t),this.nanoToggle=s(this,"nanoToggle",7)}onToggleHandler(o){o.stopPropagation(),(n(this.el,"nano-details")||this.el.querySelectorAll("nano-details")).forEach(((s,t)=>{s!==o.target?s.open=!1:this.itemOpened=t})),this.nanoToggle.emit()}onClosedHandler(o){o.stopPropagation(),this.itemOpened=null,this.nanoToggle.emit()}render(){return t(e,{class:Object.assign(Object.assign({},i(this.color)),{[`nano-color-${this.itemOpened}`]:"number"==typeof this.itemOpened})},t("slot",null))}connectedCallback(){}get el(){return r(this)}};a.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}";export{a as nano_accordion}
+//# sourceMappingURL=p-a53a193c.entry.js.map

package/dist/nano-components/p-a53a193c.entry.js.map

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

package/dist/nano-components/p-a7ac7964.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function a(t){try{p(i.next(t))}catch(o){r(o)}}function s(t){try{p(i["throw"](t))}catch(o){r(o)}}function p(t){t.done?e(t.value):n(t.value).then(a,s)}p((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,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(o){return p([t,o])}}function p(a){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(s){a=[6,s];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,o){for(var e=0,i=o.length,n=t.length;e<i;e++,n++)t[n]=o[e];return t};System.register(["./p-af9f6453.system.js","./p-1477b91d.system.js"],(function(t){"use strict";var o,e,i,n,r,a;return{setters:[function(t){o=t.r;e=t.c;i=t.h;n=t.e;r=t.g},function(t){a=t.P}],execute:function(){var s=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';var p=0;var l=t("nano_tooltip",function(){function t(t){var i=this;o(this,t);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++p;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(i.hasTrigger("focus")){i.hide()}};this.handleClick=function(){if(i.hasTrigger("click")){i.open?i.hide():i.show()}};this.handleFocus=function(){if(i.hasTrigger("focus")){i.show()}};this.handleKeyDown=function(t){if(i.open&&t.key==="Escape"){t.stopPropagation();i.hide()}};this.handleMouseOver=function(){if(i.hasTrigger("hover")){i.show()}};this.handleMouseOut=function(){if(i.hasTrigger("hover")){i.hide()}};this.handleSlotChange=function(){i.target=i.getTarget()};this.handleTTSlotChange=function(){var t=i.host.querySelector('[id="'+i.componentId+'"]')||i.host.shadowRoot.getElementById(i.componentId);Array.from(i.host.querySelectorAll('[slot="content"]')).filter((function(o){return o!==t})).forEach((function(o){t.appendChild(o)}))}}Object.defineProperty(t.prototype,"target",{get:function(){return this._target},set:function(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t},enumerable:false,configurable:true});t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();var t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy()};t.prototype.render=function(){var t=this;return i(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},i("div",{part:"base",ref:function(o){return t.tooltip=o},class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}());l.style=s}}}));
+//# sourceMappingURL=p-a7ac7964.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","exports","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","Object","defineProperty","prototype","_target","newTarget","removeAttribute","setAttribute","handleOpenChange","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","__spreadArray","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","syncOptions","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","componentDidLoad","Popover","tooltipPositioner","ele","slot","hidden","componentDidUpdate","disconnectedCallback","destroy","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\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 slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\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 slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-ec01a0ad.system.entry.js → p-aadd8c31.system.entry.js}

@@ -1,2 +1,2 @@
-var __spreadArray=this&&this.__spreadArray||function(t,e){for(var i=0,n=e.length,r=t.length;i<n;i++,r++)t[r]=e[i];return t};System.register(["./p-2d59dda3.system.js","./p-12a93bc3.system.js","./p-22b50344.system.js"],(function(t){"use strict";var e,i,n,r,s,a,o,c;return{setters:[function(t){e=t.r;i=t.c;n=t.i;r=t.h;s=t.e;a=t.g},function(t){o=t.i},function(t){c=t.d}],execute:function(){var l=t("nano_resize_observe",function(){function t(t){var n=this;e(this,t);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!n.currentWidth&&!n.currentHeight)return;var t={h:new Map,w:new Map};var e=false;Object.keys(n.appliedStates).forEach((function(i){var r;if(i==="h")r=n.currentHeight;else r=n.currentWidth;n.appliedStates[i].forEach((function(n,s){if(r>=s&&n.applied===false){n.applied=true;t[i].set(s,n);e=true}else if(r<s&&n.applied===true){n.applied=false;t[i].set(s,n);e=true}}))}));if(e)n.applyChanges(t)}}t.prototype.dimensionChanged=function(){this.assessChanges()};t.prototype.statesChanged=function(){var t=this;if(!this.states)return;if(!this.ro)this.attachRO();var e=function(t){var e=t.split(/(\d+)/).filter((function(t){return t.length}));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(i){i=i.trim();if(i.includes(" ")){var n=i.split(" "),r=n[0],s=n.slice(1);var a=e(r),o=a.bp,c=a.dir;t.appliedStates[c].set(o,{states:s,applied:false})}else{var l=e(i),o=l.bp,c=l.dir;t.appliedStates[c].set(o,{applied:false})}}))};t.prototype.applyChanges=function(t){var e=__spreadArray([],this.classNames);Object.keys(t).forEach((function(i){t[i].forEach((function(t){if(!t.states)return;t.states.map((function(i){if(t.applied)e.push(i);else e=e.filter((function(t){return t!==i}))}))}))}));this.classNames=e;this.nanoResizeStateChange.emit(this.toSimpleObj(t))};t.prototype.toSimpleObj=function(t){var e={};Object.keys(t).forEach((function(i){t[i].forEach((function(t,n){e[n+i]=t.applied}))}));return e};t.prototype.attachRO=function(){var t=this;this.ro=new o((function(e){for(var i=0,n=e;i<n.length;i++){var r=n[i];t.currentWidth=r.contentRect.width;t.currentHeight=r.contentRect.height}}));this.ro.observe(this.el)};t.prototype.connectedCallback=function(){this.assessChanges=c(this.assessChanges,50)};t.prototype.componentDidLoad=function(){var t=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){n((function(){var e=t.el.getBoundingClientRect(),i=e.width,n=e.height;t.currentWidth=i;t.currentHeight=n}))}this.statesChanged()};t.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t;var e=this;return r(s,{class:(t={},t[this.classNames.join(" ")]=true,t)},r("div",{ref:function(t){return e.el=t}},r("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return t}());l.style=":host { display: inline-block } div { height: 100%; }";var h=":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}}";var u=t("nano_skeleton",function(){function t(t){e(this,t);this.animated=true}t.prototype.render=function(){return r("div",{class:{skeleton:true,animate:this.animated}},r("div",{class:"skeleton__indicator"}))};return t}());u.style=h}}}));
-//# sourceMappingURL=p-ec01a0ad.system.entry.js.map
+var __spreadArray=this&&this.__spreadArray||function(t,e){for(var i=0,n=e.length,r=t.length;i<n;i++,r++)t[r]=e[i];return t};System.register(["./p-af9f6453.system.js","./p-12a93bc3.system.js","./p-22b50344.system.js"],(function(t){"use strict";var e,i,n,r,s,a,o,c;return{setters:[function(t){e=t.r;i=t.c;n=t.i;r=t.h;s=t.e;a=t.g},function(t){o=t.i},function(t){c=t.d}],execute:function(){var l=t("nano_resize_observe",function(){function t(t){var n=this;e(this,t);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.classNames=[];this.assessChanges=function(){if(!n.currentWidth&&!n.currentHeight)return;var t={h:new Map,w:new Map};var e=false;Object.keys(n.appliedStates).forEach((function(i){var r;if(i==="h")r=n.currentHeight;else r=n.currentWidth;n.appliedStates[i].forEach((function(n,s){if(r>=s&&n.applied===false){n.applied=true;t[i].set(s,n);e=true}else if(r<s&&n.applied===true){n.applied=false;t[i].set(s,n);e=true}}))}));if(e)n.applyChanges(t)}}t.prototype.dimensionChanged=function(){this.assessChanges()};t.prototype.statesChanged=function(){var t=this;if(!this.states)return;if(!this.ro)this.attachRO();var e=function(t){var e=t.split(/(\d+)/).filter((function(t){return t.length}));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((function(i){i=i.trim();if(i.includes(" ")){var n=i.split(" "),r=n[0],s=n.slice(1);var a=e(r),o=a.bp,c=a.dir;t.appliedStates[c].set(o,{states:s,applied:false})}else{var l=e(i),o=l.bp,c=l.dir;t.appliedStates[c].set(o,{applied:false})}}))};t.prototype.applyChanges=function(t){var e=__spreadArray([],this.classNames);Object.keys(t).forEach((function(i){t[i].forEach((function(t){if(!t.states)return;t.states.map((function(i){if(t.applied)e.push(i);else e=e.filter((function(t){return t!==i}))}))}))}));this.classNames=e;this.nanoResizeStateChange.emit(this.toSimpleObj(t))};t.prototype.toSimpleObj=function(t){var e={};Object.keys(t).forEach((function(i){t[i].forEach((function(t,n){e[n+i]=t.applied}))}));return e};t.prototype.attachRO=function(){var t=this;this.ro=new o((function(e){for(var i=0,n=e;i<n.length;i++){var r=n[i];t.currentWidth=r.contentRect.width;t.currentHeight=r.contentRect.height}}));this.ro.observe(this.el)};t.prototype.connectedCallback=function(){this.assessChanges=c(this.assessChanges,50)};t.prototype.componentDidLoad=function(){var t=this;if(!this.states)return;if(!this.currentWidth||!this.currentHeight){n((function(){var e=t.el.getBoundingClientRect(),i=e.width,n=e.height;t.currentWidth=i;t.currentHeight=n}))}this.statesChanged()};t.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect()};t.prototype.render=function(){var t;var e=this;return r(s,{class:(t={},t[this.classNames.join(" ")]=true,t)},r("div",{ref:function(t){return e.el=t}},r("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}},enumerable:false,configurable:true});return t}());l.style=":host { display: inline-block } div { height: 100%; }";var h=":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}}";var u=t("nano_skeleton",function(){function t(t){e(this,t);this.animated=true}t.prototype.render=function(){return r("div",{class:{skeleton:true,animate:this.animated}},r("div",{class:"skeleton__indicator"}))};return t}());u.style=h}}}));
+//# sourceMappingURL=p-aadd8c31.system.entry.js.map

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

@@ -0,0 +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","exports","class_1","hostRef","_this","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","prototype","dimensionChanged","statesChanged","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","_a","key","classes","slice","_b","_c","changes","__spreadArray","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","height","observe","el","connectedCallback","debounce","componentDidLoad","readTask","getBoundingClientRect","disconnectedCallback","disconnect","render","Host","class","join","ref","div","skeletonCss","Skeleton","class_2","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-ab666582.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,i as r,f as n,h as i,e,g as a}from"./p-bb0619e6.js";import{i as s}from"./p-6a284815.js";import{c as d}from"./p-d3af43d2.js";import{d as b}from"./p-ed2efbeb.js";let c=class{constructor(r){t(this,r),this.nanoOpened=o(this,"nanoOpened",7),this.nanoClosed=o(this,"nanoClosed",7),this.slideId="nano-details-"+l++,this.stateChanging=!1,this.isLoading=!0,this.label="",this.open=!1,this.noHandle=!1,this.iconRotation=90,this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open}},this.onMouseDown=()=>{this.stateChanging||(this.open=!this.open)}}toggleClick(){this.stateChanging=!0,this.open?this.show():this.hide()}hide(){this.nanoClosed.emit(this.open),b(this.contentEl,"is-shown",!1).then((()=>this.stateChanging=!1)),this.contentEl.style.height="0px"}show(){this.nanoOpened.emit(),b(this.contentEl,"is-shown",!0).then((()=>{this.stateChanging=!1})),this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){this.open&&this.contentArea&&this.contentEl&&!this.stateChanging&&r((()=>{this.contentArea.scrollHeight>0&&n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}))}attachRO(){!this.ro&&this.contentArea&&(this.ro=new s((()=>this.resize()))).observe(this.contentArea)}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]'),this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]'),setTimeout((()=>{this.isLoading=!1}),100)}componentDidLoad(){this.open&&setTimeout((()=>{this.show()}),0),this.attachRO()}connectedCallback(){(this.mo=new MutationObserver((()=>this.resize()))).observe(this.el,{childList:!0,subtree:!0,attributes:!1}),this.attachRO()}disconnectedCallback(){this.mo&&this.mo.disconnect(),this.ro&&this.ro.disconnect()}render(){return i(e,{class:Object.assign({},d(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId},i("div",{ref:t=>this.contentArea=t,class:"content__area"},i("slot",null)))))}get el(){return a(this)}static get watchers(){return{open:["toggleClick"]}}},l=0;c.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';export{c as nano_details}
+//# sourceMappingURL=p-ab666582.entry.js.map

package/dist/nano-components/p-ab666582.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/details/details.tsx","src/components/details/details.scss?tag=nano-details&encapsulation=shadow"],"names":["Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, displayTransition } from '../../utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    this.attachRO();\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n          >\n            {this.hasStartSlot ? (\n              <span\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n"]}

package/dist/nano-components/p-acd5d0f0.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,i){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{l(i.next(e))}catch(t){o(t)}}function s(e){try{l(i["throw"](e))}catch(t){o(t)}}function l(e){e.done?n(e.value):a(e.value).then(r,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(e){return function(t){return l([e,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;a=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(s){r=[6,s];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-af9f6453.system.js","./p-492a8fa8.system.js","./p-a057ad2d.system.js"],(function(e){"use strict";var t,n,i,a,o,r,s,l,d;return{setters:[function(e){t=e.r;n=e.c;i=e.h;a=e.e;o=e.g},function(e){r=e.p;s=e.a;l=e.c},function(e){d=e.c}],execute:function(){var u='.sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}@media (max-width: 35.9375em){.date-field.sc-nano-date-input::before{content:"";position:fixed;background:rgba(0, 0, 0, 0);left:0;right:0;top:0;bottom:0;z-index:-1;-webkit-transition:z-index 0.001s ease 1s, background 0.2s ease;transition:z-index 0.001s ease 1s, background 0.2s ease}[picker-open].sc-nano-date-input-h .date-field.sc-nano-date-input::before{-webkit-transition:z-index 0.001s ease, background 0.2s ease 0.001s;transition:z-index 0.001s ease, background 0.2s ease 0.001s;background:rgba(0, 0, 0, 0.5);z-index:100}}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%}.date-field__close-bar.sc-nano-date-input{-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;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}';var c={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};var p=0;var h=e("nano_date_input",function(){function e(e){var i=this;t(this,e);this.nanoChange=n(this,"nanoChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.directInput=false;this.dateOrderIndeces={d:0,m:1,y:3};this.inputId="nano-input-"+p++;this.locale=window.navigator.languages||window.navigator.language||undefined;this._invalid=false;this.helperText=true;this.helperTextFormat={year:"numeric",month:"long",day:"numeric"};this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.disabled=false;this.autofocus=false;this.clearInput=false;this.value="";this.validateOn="submit";this.showInlineError=true;this.dateOrder="dmy";this.required=false;this.hideLabel=false;this.picker=true;this.pickerOpen=false;this.closeAfterPicked=true;this.onInputChange=function(e){e.stopPropagation();i.setValue(e.target.value)};this.onInputValidate=function(e){e.stopPropagation();i._invalid=!e.detail.isValid;i.nanoValidate.emit({isValid:e.detail.isValid,errorMessage:e.detail.errorMessage,originalEvent:e.detail.originalEvent})};this.onInputKey=function(){i.directInput=true};this.onDatePicked=function(e){i.directInput=false;i.value=e.detail.value;if(i.closeAfterPicked)i.pickerOpen=false};this.onDropdownHide=function(){setTimeout((function(e){return i.pickerOpen=false}),200);setTimeout((function(e){return i.trigger.focus()}),20)};this.onDropdownShow=function(){setTimeout((function(e){i.pickerEle.setFocus(false,i.pickerOpenSource==="key");i.pickerOpenSource=null}),200)};this.onTriggerClick=function(){if(!i.pickerOpen){i.pickerOpen=true;i.pickerOpenSource="mouse"}};this.onTriggerKey=function(e){if([" ","Enter"].includes(e.key)){if(!i.pickerOpen){i.pickerOpen=true;i.pickerOpenSource="key"}}};this.onCloseClick=function(){if(i.pickerOpen)i.pickerOpen=false};this.onCloseKeyDown=function(e){if(e.key==="Tab"&&e.shiftKey){i.pickerEle.setFocus(true);e.preventDefault()}}}Object.defineProperty(e.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});e.prototype.handleValueChange=function(){if(!this.directInput)this.inputValue=this.formatIsoDate(this.value);this.nanoChange.emit({value:this.value,date:r(this.value)});this.directInput=false};e.prototype.handleDateOrderChange=function(){this.setDatePattern()};e.prototype.testDateValidity=function(){var e=this;var t=r(this.value);var n,i,a="";if(this.value&&t){if(this.min&&(n=r(this.min))&&t<n){a="Date below the minimum: "+n.toLocaleDateString(this.locale,this.helperTextFormat)}else if(this.max&&(i=r(this.max))&&t>i){a="Date above the maximum: "+i.toLocaleDateString(this.locale,this.helperTextFormat)}}setTimeout((function(n){return __awaiter(e,void 0,void 0,(function(){var e;return __generator(this,(function(n){switch(n.label){case 0:if(!this.input)return[2];return[4,this.input.getInputElement()];case 1:e=n.sent();if(this.value.length&&!t)a="Please enter a valid date";e.setCustomValidity(a);if(this.input.validateOn==="dirty"){this.input.showError(a)}return[2]}}))}))}),100)};e.prototype.handlePickerOpenChange=function(){this.dropdown.open=this.pickerOpen};e.prototype.reportValidity=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.input.reportValidity(e)];case 1:return[2,t.sent()]}}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input)this.input.setFocus();return[2]}))}))};e.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.input.getInputElement()];case 1:return[2,e.sent()]}}))}))};e.prototype.showError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.input)return[2];this.input.showError(e);return[2]}))}))};e.prototype.setDatePattern=function(){var e=this;var t=[];var n=[];Array.from(this.dateOrder).map((function(i,a){t.push(c[i]);e.dateOrderIndeces[i]=a;n.push(i==="y"?"yyyy":i+i)}));this.pattern=t.join("\\W+");if(!this.placeholder&&this.placeholder!=="false")this.placeholder=n.join(" ")};e.prototype.formatIsoDate=function(e){var t=[];Array.from("ymd").map((function(e){return t.push(c[e])}));var n=e.match(new RegExp(t.join("\\W+")));if(!n)return"";var i=[];i[this.dateOrderIndeces.d]=n[3];i[this.dateOrderIndeces.m]=n[2];i[this.dateOrderIndeces.y]=n[1];return i.join(" ")};e.prototype.setValue=function(e){var t=e.match(new RegExp(this.pattern));if(!t){this.value=e;return}var n=l(t[this.dateOrderIndeces.y+1],t[this.dateOrderIndeces.m+1],t[this.dateOrderIndeces.d+1]);if(!n){n=new Date(e);if(!n){this.value=e;return}}var i=s(n);this.value=i;return i};e.prototype.connectedCallback=function(){this.setDatePattern();this.handleValueChange()};e.prototype.componentDidLoad=function(){var e=this;if(!this.pickerCloseBtn||!this.picker)return;this.pickerEle.firstFocusEle=this.pickerCloseBtn;this.dropdown.tetherTo=this.trigger;setTimeout((function(t){return e.handlePickerOpenChange()}),300)};e.prototype.render=function(){var e=this;this.locale=navigator.languages||navigator.language||undefined;var t=this.host.ownerDocument.dir==="rtl"?"bottom-start":"bottom-end";var n=r(this.value);var o=!!this.host.querySelector('[slot="helper"]');return i(a,{class:Object.assign({},d(this.color))},i("div",{class:"date-field"},i("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||undefined,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:this.placeholder!=="false"?this.placeholder:undefined,pattern:this.pattern,label:this.label,disabled:this.disabled||undefined,color:this.color||undefined,autofocus:this.autofocus||undefined,clearInput:this.clearInput||undefined,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||undefined,size:this.size||undefined,readonly:this.readonly,value:this.inputValue,ref:function(t){return e.input=t},floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric"},i("slot",{name:"label"}),this.picker&&[i("button",{slot:"inline-button",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:function(t){return e.trigger=t},disabled:this.disabled||this.readonly},i("nano-icon",{name:"light/calendar-alt"})),i("nano-dropdown",{slot:"inline-button",placement:t,onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:function(t){return e.dropdown=t}},i("div",null,i("div",{class:"date-field__close-bar"},i("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:function(t){return e.pickerCloseBtn=t}},i("nano-icon",{name:"light/times"}),i("span",{class:"vhidden"},"Close window"))),i("nano-date-picker",{onNanoDatePicked:this.onDatePicked,min:this.min||undefined,max:this.max||undefined,"is-modal":true,ref:function(t){return e.pickerEle=t},localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||undefined})))],(o||this.helperText||this.showInlineError)&&i("span",{slot:"helper"},i("span",{class:{vhidden:!!this.value.length}},i("slot",{name:"helper"})),this.helperText&&!!n&&i("span",null,n.toLocaleDateString(this.locale,this.helperTextFormat)))),i("input",{type:"hidden",value:this.value,name:this.name})))};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}},enumerable:false,configurable:true});return e}());h.style=u}}}));
+//# sourceMappingURL=p-acd5d0f0.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","exports","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","Object","defineProperty","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","tetherTo","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{$color-celsius};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\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   */\n  @Prop() min?: string;\n\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   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      } else if (\n        this.max &&\n        (max = parseISODate(this.max)) &&\n        valueDate > max\n      ) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n    }\n\n    setTimeout(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    }, 100);\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (\n    e: CustomEvent & {\n      target: HTMLInputElement;\n    }\n  ) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 20);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n          >\n            <slot name=\"label\" />\n            {this.picker && [\n              <button\n                slot=\"inline-button\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"inline-button\"\n                placement={placement}\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/times\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal={true}\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-af9f6453.system.js

@@ -0,0 +1,2 @@
+var __extends=this&&this.__extends||function(){var e=function(t,n){e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)if(Object.prototype.hasOwnProperty.call(t,n))e[n]=t[n]};return e(t,n)};return function(t,n){if(typeof n!=="function"&&n!==null)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");e(t,n);function r(){this.constructor=t}t.prototype=n===null?Object.create(n):(r.prototype=n.prototype,new r)}}();var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function s(e){try{f(r.next(e))}catch(t){a(t)}}function o(e){try{f(r["throw"](e))}catch(t){a(t)}}function f(e){e.done?n(e.value):i(e.value).then(s,o)}f((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(e){return function(t){return f([e,t])}}function f(s){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,i&&(a=s[0]&2?i["return"]:s[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,s[1])).done)return a;if(i=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){n.label=s[1];break}if(s[0]===6&&n.label<a[1]){n.label=a[1];a=s;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(s);break}if(a[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(o){s=[6,o];i=0}finally{r=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t){for(var n=0,r=t.length,i=e.length;n<r;n++,i++)e[i]=t[n];return e};System.register([],(function(e,t){"use strict";return{execute:function(){var n=this;var r=e("N","nano-components");var i;var a;var s;var o=false;var f=false;var l=false;var c=false;var u=null;var $=false;var d=e("w",typeof window!=="undefined"?window:{});var v=e("C",d.CSS);var h=e("d",d.document||{head:{}});var p=e("H",d.HTMLElement||function(){function e(){}return e}());var m=e("p",{$flags$:0,$resourcesUrl$:"",jmp:function(e){return e()},raf:function(e){return requestAnimationFrame(e)},ael:function(e,t,n,r){return e.addEventListener(t,n,r)},rel:function(e,t,n,r){return e.removeEventListener(t,n,r)},ce:function(e,t){return new CustomEvent(e,t)}});var g=function(){return(h.head.attachShadow+"").indexOf("[native")>-1}();var y=e("a",(function(e){return Promise.resolve(e)}));var _=function(){try{new CSSStyleSheet;return typeof(new CSSStyleSheet).replace==="function"}catch(e){}return false}();var b=function(e,t,n,r){if(n){n.map((function(n){var r=n[0],i=n[1],a=n[2];var s=w(e,r);var o=N(t,a);var f=C(r);m.ael(s,i,o,f);(t.$rmListeners$=t.$rmListeners$||[]).push((function(){return m.rel(s,i,o,f)}))}))}};var N=function(e,t){return function(n){try{{if(e.$flags$&256){e.$lazyInstance$[t](n)}else{(e.$queuedListeners$=e.$queuedListeners$||[]).push([t,n])}}}catch(r){st(r,e.$hostElement$||null)}}};var w=function(e,t){if(t&8)return d;if(t&16)return h.body;return e};var C=function(e){return(e&2)!==0};var T="{visibility:hidden}.hydrated{visibility:inherit}";var x="http://www.w3.org/1999/xlink";var j=function(e,t){if(t===void 0){t=""}{return function(){return}}};var S=function(e,t){{return function(){return}}};var E=new WeakMap;var R=function(e,t,n){var r=lt.get(e);if(_&&n){r=r||new CSSStyleSheet;r.replace(t)}else{r=t}lt.set(e,r)};var O=function(e,t,n,r){var i=P(t);var a=lt.get(i);e=e.nodeType===11?e:h;if(a){if(typeof a==="string"){e=e.head||e;var s=E.get(e);var o=void 0;if(!s){E.set(e,s=new Set)}if(!s.has(i)){{if(m.$cssShim$){o=m.$cssShim$.createHostStyle(r,i,a,!!(t.$flags$&10));var f=o["s-sc"];if(f){i=f;s=null}}else{o=h.createElement("style");o.innerHTML=a}e.insertBefore(o,e.querySelector("link"))}if(s){s.add(i)}}}else if(!e.adoptedStyleSheets.includes(a)){e.adoptedStyleSheets=__spreadArray(__spreadArray([],e.adoptedStyleSheets),[a])}}return i};var L=function(e){var t=e.$cmpMeta$;var n=e.$hostElement$;var r=t.$flags$;var i=j("attachStyles",t.$tagName$);var a=O(g&&n.shadowRoot?n.shadowRoot:n.getRootNode(),t,e.$modeName$,n);if(r&10){n["s-sc"]=a;n.classList.add(a+"-h");if(r&2){n.classList.add(a+"-s")}}i()};var P=function(e,t){return"sc-"+e.$tagName$};var A={};var k=function(e){return e!=null};var M=function(e){e=typeof e;return e==="object"||e==="function"};var H=e("h",(function(e,t){var n=[];for(var r=2;r<arguments.length;r++){n[r-2]=arguments[r]}var i=null;var a=null;var s=null;var o=false;var f=false;var l=[];var c=function(t){for(var n=0;n<t.length;n++){i=t[n];if(Array.isArray(i)){c(i)}else if(i!=null&&typeof i!=="boolean"){if(o=typeof e!=="function"&&!M(i)){i=String(i)}if(o&&f){l[l.length-1].$text$+=i}else{l.push(o?I(null,i):i)}f=o}}};c(n);if(t){if(t.key){a=t.key}if(t.name){s=t.name}{var u=t.className||t.class;if(u){t.class=typeof u!=="object"?u:Object.keys(u).filter((function(e){return u[e]})).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,l,z)}var $=I(e,null);$.$attrs$=t;if(l.length>0){$.$children$=l}{$.$key$=a}{$.$name$=s}return $}));var I=function(e,t){var n={$flags$:0,$tag$:e,$text$:t,$elm$:null,$children$:null};{n.$attrs$=null}{n.$key$=null}{n.$name$=null}return n};var B=e("e",{});var D=function(e){return e&&e.$tag$===B};var z={forEach:function(e,t){return e.map(q).forEach(t)},map:function(e,t){return e.map(q).map(t).map(U)}};var q=function(e){return{vattrs:e.$attrs$,vchildren:e.$children$,vkey:e.$key$,vname:e.$name$,vtag:e.$tag$,vtext:e.$text$}};var U=function(e){if(typeof e.vtag==="function"){var t=Object.assign({},e.vattrs);if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return H.apply(void 0,__spreadArray([e.vtag,t],e.vchildren||[]))}var n=I(e.vtag,e.vtext);n.$attrs$=e.vattrs;n.$children$=e.vchildren;n.$key$=e.vkey;n.$name$=e.vname;return n};var V=function(e,t,n,r,i,a){if(n!==r){var s=at(e,t);var o=t.toLowerCase();if(t==="class"){var f=e.classList;var l=F(n);var c=F(r);f.remove.apply(f,l.filter((function(e){return e&&!c.includes(e)})));f.add.apply(f,c.filter((function(e){return e&&!l.includes(e)})))}else if(t==="style"){{for(var u in n){if(!r||r[u]==null){if(u.includes("-")){e.style.removeProperty(u)}else{e.style[u]=""}}}}for(var u in r){if(!n||r[u]!==n[u]){if(u.includes("-")){e.style.setProperty(u,r[u])}else{e.style[u]=r[u]}}}}else if(t==="key");else if(t==="ref"){if(r){r(e)}}else if(!s&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(at(d,o)){t=o.slice(2)}else{t=o[2]+t.slice(3)}if(n){m.rel(e,t,n,false)}if(r){m.ael(e,t,r,false)}}else{var $=M(r);if((s||$&&r!==null)&&!i){try{if(!e.tagName.includes("-")){var v=r==null?"":r;if(t==="list"){s=false}else if(n==null||e[t]!=v){e[t]=v}}else{e[t]=r}}catch(p){}}var h=false;{if(o!==(o=o.replace(/^xlink\:?/,""))){t=o;h=true}}if(r==null||r===false){if(r!==false||e.getAttribute(t)===""){if(h){e.removeAttributeNS(x,t)}else{e.removeAttribute(t)}}}else if((!s||a&4||i)&&!$){r=r===true?"":r;if(h){e.setAttributeNS(x,t,r)}else{e.setAttribute(t,r)}}}}};var W=/\s/;var F=function(e){return!e?[]:e.split(W)};var G=function(e,t,n,r){var i=t.$elm$.nodeType===11&&t.$elm$.host?t.$elm$.host:t.$elm$;var a=e&&e.$attrs$||A;var s=t.$attrs$||A;{for(r in a){if(!(r in s)){V(i,r,a[r],undefined,n,t.$flags$)}}}for(r in s){V(i,r,a[r],s[r],n,t.$flags$)}};var J=function(e){var t=e.cloneNode;e.cloneNode=function(e){var n=this;var r=t.call(n,false);if(e){var i=0;var a=void 0,s=void 0;var o=["s-id","s-cr","s-lr","s-rc","s-sc","s-p","s-cn","s-sr","s-sn","s-hn","s-ol","s-nr","s-si","s-sf","s-sfc","s-hsf"];for(;i<n.__childNodes.length;i++){a=n.__childNodes[i]["s-nr"];s=o.every((function(e){return!n.__childNodes[i][e]}));if(a){r.__appendChild(a.cloneNode(true))}if(s){r.__appendChild(n.__childNodes[i].cloneNode(true))}}}return r}};var K=function(e){Q(e);ne(e);ie(e);re(e);se(e);oe(e);fe(e);ae(e);X(e);Y(e);Z(e)};var Q=function(e){var t=function(e){__extends(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}t.prototype.item=function(e){return this[e]};return t}(Array);var n=Object.getOwnPropertyDescriptor(Node.prototype,"childNodes");if(n)Object.defineProperty(e,"__childNodes",n);var r=Object.getOwnPropertyDescriptor(Element.prototype,"children");if(!r)r=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"children");if(r)Object.defineProperty(e,"__children",r);var i=Object.getOwnPropertyDescriptor(Element.prototype,"childElementCount");if(i)Object.defineProperty(e,"__childElementCount",i);Object.defineProperty(e,"children",{get:function(){return this.childNodes.flatMap((function(e){if(e.nodeType===1)return e;else return[]}))}});Object.defineProperty(e,"childElementCount",{get:function(){return e.children.length}});if(!n)return;Object.defineProperty(e,"childNodes",{get:function(){var e=this.__childNodes;var n=new t;for(var r=0;r<e.length;r++){var i=e[r]["s-nr"];if(i){n.push(i)}}return n}})};var X=function(e){var t=Object.getOwnPropertyDescriptor(Element.prototype,"innerHTML");if(!t)t=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerHTML");if(t)Object.defineProperty(e,"__innerHTML",t);Object.defineProperty(e,"innerHTML",{get:function(){var e="";this.childNodes.forEach((function(t){return e+=t.outerHTML||t.textContent}));return e},set:function(e){this.childNodes.forEach((function(e){if(e["s-ol"])e["s-ol"].remove();e.remove()}));this.insertAdjacentHTML("beforeend",e)}})};var Y=function(e){var t=Object.getOwnPropertyDescriptor(Element.prototype,"innerText");if(!t)t=Object.getOwnPropertyDescriptor(HTMLElement.prototype,"innerText");if(t)Object.defineProperty(e,"__innerText",t);Object.defineProperty(e,"innerText",{get:function(){var e="";this.childNodes.forEach((function(t){return e+=t.innerText||t.textContent.trimEnd()}));return e},set:function(e){this.childNodes.forEach((function(e){if(e["s-ol"])e["s-ol"].remove();e.remove()}));this.insertAdjacentHTML("beforeend",e)}})};var Z=function(e){var t=Object.getOwnPropertyDescriptor(Node.prototype,"textContent");if(t)Object.defineProperty(e,"__textContent",t);Object.defineProperty(e,"textContent",{get:function(){var e="";this.childNodes.forEach((function(t){return e+=t.textContent||""}));return e},set:function(e){this.childNodes.forEach((function(e){if(e["s-ol"])e["s-ol"].remove();e.remove()}));this.insertAdjacentHTML("beforeend",e)}})};var ee=function(e){if(!e||e.__remove)return;e.__remove=e.remove||true;te(e.parentNode);e.remove=function(){if(this.parentNode){return this.parentNode.removeChild(this)}return this.__remove()}};var te=function(e){if(!e||e.__removeChild)return;e.__removeChild=e.removeChild;e.removeChild=function(e){if(e["s-sn"]){var t=ce(this.__childNodes||this.childNodes,e["s-sn"]);this.__removeChild(e);if(t&&t["s-hsf"])de(this);return}return this.__removeChild(e)}};var ne=function(e){if(e.__appendChild)return;e.__appendChild=e.appendChild;e.appendChild=function(e){var t=e["s-sn"]=le(e);var n=ce(this.__childNodes,t);if(n){var r=document.createTextNode("");r["s-nr"]=e;if(n["s-cr"].parentNode){n["s-cr"].parentNode.__appendChild(r)}e["s-ol"]=r;ee(e);var i=ue(n,t);var a=i[i.length-1];a.parentNode.insertBefore(e,a.nextSibling);te(e.parentNode);if(n["s-hsf"])de(n.parentNode);return}if(e.nodeType===1&&!!e.getAttribute("slot")&&this.__childNodes)e.hidden=true;return this.__appendChild(e)}};var re=function(e){if(e.__prepend)return;e.__prepend=e.prepend;e.prepend=function(){var e=this;var t=[];for(var n=0;n<arguments.length;n++){t[n]=arguments[n]}t.forEach((function(t){if(typeof t==="string"){t=e.ownerDocument.createTextNode(t)}var n=t["s-sn"]=le(t);var r=ce(e.__childNodes,n);if(r){var i=document.createTextNode("");i["s-nr"]=t;if(r["s-cr"].parentNode){r["s-cr"].parentNode.__appendChild(i)}t["s-ol"]=i;ee(t);var a=ue(r,n);var s=a[0];s.parentNode.insertBefore(t,s.nextSibling);te(t.parentNode);if(r["s-hsf"])de(r.parentNode);return}if(t.nodeType===1&&!!t.getAttribute("slot")&&e.__childNodes)t.hidden=true;return e.__prepend(t)}))}};var ie=function(e){if(e.__append)return;e.__append=e.append;e.append=function(){var e=this;var t=[];for(var n=0;n<arguments.length;n++){t[n]=arguments[n]}t.forEach((function(t){if(typeof t==="string"){t=e.ownerDocument.createTextNode(t)}e.appendChild(t)}))}};var ae=function(e){if(e.__replaceChildren)return;e.__replaceChildren=e.replaceChildren;e.replaceChildren=function(){var e=[];for(var t=0;t<arguments.length;t++){e[t]=arguments[t]}var n=ce(this.__childNodes,"");if(n){var r=ue(n,"");r.forEach((function(e){if(!e["s-sr"]){e.remove()}}));this.append.apply(this,e)}}};var se=function(e){if(e.__insertAdjacentHTML)return;e.__insertAdjacentHTML=e.insertAdjacentHTML;e.insertAdjacentHTML=function(e,t){if(e!=="afterbegin"&&e!=="beforeend"){return this.__insertAdjacentHTML(e,t)}var n=this.ownerDocument.createElement("_");var r;n.innerHTML=t;if(e==="afterbegin"){while(r=n.firstChild){this.prepend(r)}}else if(e==="beforeend"){while(r=n.firstChild){this.append(r)}}}};var oe=function(e){if(e.__insertAdjacentText)return;e.__insertAdjacentText=e.insertAdjacentText;e.insertAdjacentText=function(e,t){this.insertAdjacentHTML(e,t)}};var fe=function(e){if(e.__insertAdjacentElement)return;e.__insertAdjacentElement=e.insertAdjacentElement;e.insertAdjacentElement=function(e,t){if(e!=="afterbegin"&&e!=="beforeend"){return this.__insertAdjacentElement(e,t)}if(e==="afterbegin"){this.prepend(t)}else if(e==="beforeend"){this.append(t)}}};var le=function(e){return e["s-sn"]||e.nodeType===1&&e.getAttribute("slot")||e.slot||""};var ce=function(e,t){var n=0;var r;if(!e)return null;for(;n<e.length;n++){r=e[n];if(r["s-sr"]&&r["s-sn"]===t){return r}r=ce(r.childNodes,t);if(r){return r}}return null};var ue=function(e,t){var n=[e];while((e=e.nextSibling)&&e["s-sn"]===t){n.push(e)}return n};var $e=function(e,t){if(!e["s-hsf"])return;var n=e;while((n=n.previousSibling||n.parentNode)&&n.tagName!==e["s-hn"]){if(n["s-sr"]&&t&&n["s-psn"]&&n["s-psn"]===e["s-sn"]){$e(n,true);continue}if(n["s-sn"]!==e["s-sn"])continue;if(n.nodeType===1){n.hidden=t;n.style.display=t?"none":""}else if(!!n["s-sfc"]){if(t){n["s-sfc"]=n.textContent;n.textContent=""}else if(n.textContent.trim()===""){n.textContent=n["s-sfc"]}}}};var de=function(e){var t=e.__childNodes||e.childNodes;var n;var r;var i;var a;var s;var o;for(r=0,i=t.length;r<i;r++){n=t[r];if(n["s-sr"]){s=n["s-sn"];$e(n,false);for(a=0;a<i;a++){o=t[a].nodeType;if(t[a]["s-sf"])continue;if(t[a]["s-hn"]!==n["s-hn"]||s!==""){if(o===1&&s===t[a]["s-sn"]){$e(n,true);ee(t[a]);break}}else if(t[a]["s-sn"]===s){if(o===1||o===3&&t[a].textContent.trim()!==""){$e(n,true);ee(t[a]);break}}}}de(n)}};var ve=function(e,t,n,r){var f=t.$children$[n];var u=0;var $;var d;var v;if(!o){l=true;if(f.$tag$==="slot"){if(i){r.classList.add(i+"-s")}f.$flags$|=f.$children$?2:1}}if(f.$text$!==null){$=f.$elm$=h.createTextNode(f.$text$)}else if(f.$flags$&(1|2)){$=f.$elm$=h.createTextNode("")}else{$=f.$elm$=h.createElement(f.$tag$);{G(null,f,c)}if(k(i)&&$["s-si"]!==i){$.classList.add($["s-si"]=i)}if(f.$children$){for(u=0;u<f.$children$.length;++u){d=ve(e,f,u,$);if(d){$.__appendChild?$.__appendChild(d):$.appendChild(d)}}}}{$["s-hn"]=s;if(f.$flags$&(2|1)){$["s-sr"]=true;$["s-cr"]=a;$["s-sn"]=f.$name$||"";if(t.$name$)$["s-psn"]=t.$name$;if(f.$flags$&2){if(f.$children$){for(u=0;u<f.$children$.length;++u){var p=$.nodeType===1?$:r;while(p.nodeType!==1){p=p.parentNode}d=ve(e,f,u,p);d["s-sf"]=$["s-hsf"]=true;if(typeof d["s-sn"]==="undefined")d["s-sn"]=f.$name$||"";if(d.nodeType===3){d["s-sfc"]=d.textContent}if(d){p.__appendChild?p.__appendChild(d):p.appendChild(d)}}}}v=e&&e.$children$&&e.$children$[n];if(v&&v.$tag$===f.$tag$&&e.$elm$){he(e.$elm$,false)}}}return $};var he=function(e,t){m.$flags$|=1;var n=e.__childNodes||e.childNodes;for(var r=n.length-1;r>=0;r--){var i=n[r];if(i["s-hn"]!==s&&i["s-ol"]){Ne(i).insertBefore(i,be(i));i["s-ol"].remove();i["s-ol"]=undefined;l=true}if(t){he(i,t)}}m.$flags$&=~1};var pe=function(e,t,n,r,i,a){var o=e["s-cr"]&&e["s-cr"].parentNode||e;var f;if(o.shadowRoot&&o.tagName===s){o=o.shadowRoot}for(;i<=a;++i){if(r[i]){f=ve(null,n,i,e);if(f){r[i].$elm$=f;o.insertBefore(f,be(t))}}}};var me=function(e){var t;var n;var r;var i=e.__childNodes||e.childNodes;for(n=0,r=i.length;n<r;n++){t=i[n];if(t["s-ol"]){if(t["s-hn"])t["s-hn"]=undefined}else{me(t)}}};var ge=function(e,t,n,r,i){for(;t<=n;++t){if(r=e[t]){i=r.$elm$;je(r);{f=true;me(i);if(i["s-ol"]){i["s-ol"].remove()}else{he(i,true)}}i.remove()}}};var ye=function(e,t,n,r){var i=0;var a=0;var s=0;var o=0;var l=0;var c=t.length-1;var u=t[0];var $=t[c];var d=r.length-1;var v=r[0];var h=r[d];var p;var m;var g;var y;var _=[];var b;var N={};var w;var C;var T;var x;while(i<=c&&a<=d){if(u==null){u=t[++i]}else if($==null){$=t[--c]}else if(v==null){v=r[++a]}else if(h==null){h=r[--d]}else if(_e(u,v)){we(u,v);u=t[++i];v=r[++a]}else if(_e($,h)){we($,h);$=t[--c];h=r[--d]}else if(_e(u,h)){if(u.$tag$==="slot"||h.$tag$==="slot"){he(u.$elm$.parentNode,false)}we(u,h);e.insertBefore(u.$elm$,$.$elm$.nextSibling);u=t[++i];h=r[--d]}else if(_e($,v)){if(u.$tag$==="slot"||h.$tag$==="slot"){he($.$elm$.parentNode,false)}we($,v);e.insertBefore($.$elm$,u.$elm$);$=t[--c];v=r[++a]}else{s=-1;{for(o=i;o<=c;++o){if(t[o]&&t[o].$key$!==null&&t[o].$key$===v.$key$){s=o;break}}}if(s>=0){m=t[s];if(m.$tag$!==v.$tag$){p=ve(t&&t[a],n,s,e)}else{we(m,v);t[s]=undefined;p=m.$elm$}v=r[++a]}else{p=ve(t&&t[a],n,a,e);v=r[++a]}if(p){{Ne(u.$elm$).insertBefore(p,be(u.$elm$))}}}}if(i>c){pe(e,r[d+1]==null?null:r[d+1].$elm$,n,r,a,d)}else if(a>d){ge(t,i,c)}if(e.parentNode&&n.$elm$["s-hsf"]){g=e.parentNode.__childNodes||e.parentNode.childNodes;y=g.length-1;for(o=0;o<=y;++o){C=g[o];if(C["s-hsf"]){_.push(C);continue}if(C["s-sf"]){if(!N[C["s-sn"]])N[C["s-sn"]]=[];N[C["s-sn"]].push(C)}}b=_.length-1;for(o=0;o<=b;++o){T=_[o];if(!N[T["s-sn"]])continue;w=N[T["s-sn"]].length-1;for(l=0;l<=w;++l){x=N[T["s-sn"]][l];T.parentNode.insertBefore(x,T)}}f=true}};var _e=function(e,t){if(e.$tag$===t.$tag$){if(e.$tag$==="slot"){return e.$name$===t.$name$}{return e.$key$===t.$key$}}return false};var be=function(e){return e&&e["s-ol"]||e};var Ne=function(e){return(e["s-ol"]?e["s-ol"]:e).parentNode};var we=function(e,t){var n=t.$elm$=e.$elm$;var r=e.$children$;var i=t.$children$;var a=t.$tag$;var s=t.$text$;var o;if(s===null){{if(a==="slot");else{G(e,t,c)}}if(r!==null&&i!==null){ye(n,r,t,i)}else if(i!==null){if(e.$text$!==null){n.textContent=""}pe(n,null,t,i,0,i.length-1)}else if(r!==null){ge(r,0,r.length-1)}}else if(o=n["s-cr"]){o.parentNode.textContent=s}else if(e.$text$!==s){n.textContent=s;if(n["s-sf"]){n["s-sfc"]=s}}};var Ce=[];var Te=function(e){var t;var n;var r;var i;var a;var s;var o=0;var l=e.__childNodes||e.childNodes;var c=l.length;for(;o<c;o++){t=l[o];if(t["s-sr"]&&(n=t["s-cr"])&&n.parentNode){if(t["s-hsf"]){f=true}r=n.parentNode.__childNodes||n.parentNode.childNodes;i=t["s-sn"];for(s=r.length-1;s>=0;s--){n=r[s];if(!n["s-cn"]&&!n["s-nr"]&&n["s-hn"]!==t["s-hn"]){if(xe(n,i)){a=Ce.find((function(e){return e.$nodeToRelocate$===n}));f=true;n["s-sn"]=n["s-sn"]||i;if(a){a.$slotRefNode$=t}else{Ce.push({$slotRefNode$:t,$nodeToRelocate$:n})}if(n["s-sr"]){Ce.map((function(e){if(xe(e.$nodeToRelocate$,n["s-sn"])){a=Ce.find((function(e){return e.$nodeToRelocate$===n}));if(a&&!e.$slotRefNode$){e.$slotRefNode$=a.$slotRefNode$}}}))}}else if(!Ce.some((function(e){return e.$nodeToRelocate$===n}))){Ce.push({$nodeToRelocate$:n})}}}}if(t.nodeType===1){Te(t)}}};var xe=function(e,t){if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var je=function(e){{e.$attrs$&&e.$attrs$.ref&&e.$attrs$.ref(null);e.$children$&&e.$children$.map(je)}};var Se=function(e,t){var n=e.$hostElement$;var r=e.$cmpMeta$;var c=e.$vnode$||I(null,null);var u=D(t)?t:H(null,null,t);s=n.tagName;if(r.$attrsToReflect$){u.$attrs$=u.$attrs$||{};r.$attrsToReflect$.map((function(e){var t=e[0],r=e[1];return u.$attrs$[r]=n[t]}))}u.$tag$=null;u.$flags$|=4;e.$vnode$=u;u.$elm$=c.$elm$=n.shadowRoot||n;{i=n["s-sc"]}{a=n["s-cr"];o=g&&(r.$flags$&1)!==0;f=false}we(c,u);{m.$flags$|=1;if(l){Te(u.$elm$);var $=void 0;var d=void 0;var v=void 0;var p=void 0;var y=void 0;var _=void 0;var b=void 0;var N=0;for(;N<Ce.length;N++){$=Ce[N];d=$.$nodeToRelocate$;if(!d["s-ol"]){v=h.createTextNode("");v["s-nr"]=d;d.parentNode.insertBefore(d["s-ol"]=v,d)}}for(N=0;N<Ce.length;N++){$=Ce[N];d=$.$nodeToRelocate$;if($.$slotRefNode$){p=$.$slotRefNode$.parentNode;y=$.$slotRefNode$.nextSibling;v=d["s-ol"];b=y;while(v=v.previousSibling){_=v["s-nr"];if(_&&_["s-sn"]===d["s-sn"]&&p===_.parentNode){_=_.nextSibling;if(!_||!_["s-nr"]){y=_;break}}}if(!y&&p!==d.parentNode||d.nextSibling!==y){if(d!==y){if(!d["s-hn"]&&d["s-ol"]){d["s-hn"]=d["s-ol"].parentNode.nodeName}p.insertBefore(d,y);d.hidden=false}else{p.insertBefore(d,b)}}}else{if(d.nodeType===1){d.hidden=true}}}}if(f){de(u.$elm$)}m.$flags$&=~1;Ce.length=0}};var Ee=e("g",(function(e){return nt(e).$hostElement$}));var Re=e("c",(function(e,t,n){var r=Ee(e);return{emit:function(e){return Oe(r,t,{bubbles:!!(n&4),composed:!!(n&2),cancelable:!!(n&1),detail:e})}}}));var Oe=function(e,t,n){var r=m.ce(t,n);e.dispatchEvent(r);return r};var Le=function(e,t){if(t&&!e.$onRenderResolve$&&t["s-p"]){t["s-p"].push(new Promise((function(t){return e.$onRenderResolve$=t})))}};var Pe=function(e,t){{e.$flags$|=16}if(e.$flags$&4){e.$flags$|=512;return}Le(e,e.$ancestorComponent$);var n=function(){return Ae(e,t)};return mt(n)};var Ae=function(e,t){var n=e.$hostElement$;var r=j("scheduleUpdate",e.$cmpMeta$.$tagName$);var i=e.$lazyInstance$;var a;if(t){{e.$flags$|=256;if(e.$queuedListeners$){e.$queuedListeners$.map((function(e){var t=e[0],r=e[1];return ze(i,t,r,n)}));e.$queuedListeners$=null}}{a=ze(i,"componentWillLoad",undefined,n)}}r();return qe(a,(function(){return ke(e,i,t)}))};var ke=function(e,t,r){return __awaiter(n,void 0,void 0,(function(){var n,i,a,s,o,f;return __generator(this,(function(l){n=e.$hostElement$;i=j("update",e.$cmpMeta$.$tagName$);a=n["s-rc"];if(r){L(e)}s=j("render",e.$cmpMeta$.$tagName$);{Me(e,t)}if(m.$cssShim$){m.$cssShim$.updateHost(n)}if(a){a.map((function(e){return e()}));n["s-rc"]=undefined}s();i();{o=n["s-p"];f=function(){return Ie(e)};if(o.length===0){f()}else{Promise.all(o).then(f);e.$flags$|=4;o.length=0}}return[2]}))}))};var Me=function(e,t,n){try{u=t;t=t.render();{e.$flags$&=~16}{e.$flags$|=2}{{{Se(e,t)}}}}catch(r){st(r,e.$hostElement$)}u=null;return null};var He=e("l",(function(){return u}));var Ie=function(e){var t=e.$cmpMeta$.$tagName$;var n=e.$hostElement$;var r=j("postUpdate",t);var i=e.$lazyInstance$;var a=e.$ancestorComponent$;{ze(i,"componentDidRender",undefined,n)}if(!(e.$flags$&64)){e.$flags$|=64;{Ue(n)}{ze(i,"componentDidLoad",undefined,n)}r();{e.$onReadyResolve$(n);if(!a){De()}}}else{{ze(i,"componentDidUpdate",undefined,n)}r()}{e.$onInstanceResolve$(n)}{if(e.$onRenderResolve$){e.$onRenderResolve$();e.$onRenderResolve$=undefined}if(e.$flags$&512){ht((function(){return Pe(e,false)}))}e.$flags$&=~(4|512)}};var Be=e("j",(function(e){{var t=nt(e);var n=t.$hostElement$.isConnected;if(n&&(t.$flags$&(2|16))===2){Pe(t,false)}return n}}));var De=function(e){{Ue(h.documentElement)}ht((function(){return Oe(d,"appload",{detail:{namespace:r}})}))};var ze=function(e,t,n,r){if(e&&e[t]){try{return e[t](n)}catch(i){st(i,r)}}return undefined};var qe=function(e,t){return e&&e.then?e.then(t):t()};var Ue=function(e){return e.classList.add("hydrated")};var Ve=function(e,t){if(e!=null&&!M(e)){if(t&4){return e==="false"?false:e===""||!!e}if(t&2){return parseFloat(e)}if(t&1){return String(e)}return e}return e};var We=function(e,t){return nt(e).$instanceValues$.get(t)};var Fe=function(e,t,n,r,i){if(i===void 0){i=true}var a=nt(e);var s=a.$hostElement$;var o=a.$instanceValues$.get(t);var f=a.$flags$;var l=a.$lazyInstance$;n=Ve(n,r.$members$[t][0]);if((!(f&8)||o===undefined)&&n!==o){a.$instanceValues$.set(t,n);if(l){if(r.$watchers$&&f&128&&i){var c=r.$watchers$[t];if(c){c.map((function(e){try{l[e](n,o,t)}catch(r){st(r,s)}}))}}if((f&(2|16))===2){Pe(a,false)}}}};var Ge=function(e,t,n){if(t.$members$){if(e.watchers){t.$watchers$=e.watchers}var r=Object.entries(t.$members$);var i=e.prototype;r.map((function(e){var r=e[0],a=e[1][0];if(a&31||n&2&&a&32){if((a&2048)===0){Object.defineProperty(i,r,{get:function(){return We(this,r)},set:function(e){Fe(this,r,e,t)},configurable:true,enumerable:true})}else if(n&1&&a&2048){{Object.defineProperty(i,r,{get:function(){var e=nt(this);var t=e.$lazyInstance$;return t[r]},configurable:true,enumerable:true});if(a&4096){Object.defineProperty(i,r,{set:function(e){var n=this;var i=nt(this);var a=function(a){if(a===void 0){a=false}i.$lazyInstance$[r]=e;Fe(n,r,i.$lazyInstance$[r],t,!a)};if(i.$lazyInstance$){a()}else{i.$onInstancePromise$.then((function(){return a(true)}))}}})}}}}else if(n&1&&a&64){Object.defineProperty(i,r,{value:function(){var e=[];for(var t=0;t<arguments.length;t++){e[t]=arguments[t]}var n=nt(this);return n.$onInstancePromise$.then((function(){var t;return(t=n.$lazyInstance$)[r].apply(t,e)}))}})}}));if(n&1){var a=new Map;i.attributeChangedCallback=function(e,t,n){var r=this;m.jmp((function(){var t=a.get(e);if(r.hasOwnProperty(t)){n=r[t];delete r[t]}var s=Object.getOwnPropertyDescriptor(i,t);if(!s.get||!!s.set){r[t]=n===null&&typeof r[t]==="boolean"?false:n}}))};e.observedAttributes=r.filter((function(e){var t=e[0],n=e[1];return n[0]&15})).map((function(e){var n=e[0],r=e[1];var i=r[1]||n;a.set(i,n);if(r[0]&512){t.$attrsToReflect$.push([n,i])}return i}))}}return e};var Je=function(e,r,i,a,s){return __awaiter(n,void 0,void 0,(function(){var n,a,o,f,l,c,u;return __generator(this,(function($){switch($.label){case 0:if(!((r.$flags$&32)===0))return[3,5];r.$flags$|=32;s=ft(i,r);if(!s.then)return[3,2];n=S();return[4,s];case 1:s=$.sent();n();$.label=2;case 2:if(!s.isProxied){{i.$watchers$=s.watchers}Ge(s,i,2);s.isProxied=true}a=j("createInstance",i.$tagName$);{r.$flags$|=8}try{new s(r)}catch(d){st(d,e)}{r.$flags$&=~8}{r.$flags$|=128}a();Ke(r.$lazyInstance$,e);if(!s.style)return[3,5];o=s.style;f=P(i);if(!!lt.has(f))return[3,5];l=j("registerStyles",i.$tagName$);if(!(i.$flags$&8))return[3,4];return[4,t.import("./p-9348c301.system.js").then((function(e){return e.scopeCss(o,f,false)}))];case 3:o=$.sent();$.label=4;case 4:R(f,o,!!(i.$flags$&1));l();$.label=5;case 5:c=r.$ancestorComponent$;u=function(){return Pe(r,true)};if(c&&c["s-rc"]){c["s-rc"].push(u)}else{u()}return[2]}}))}))};var Ke=function(e,t){{ze(e,"connectedCallback",undefined,t)}};var Qe=function(e){if((m.$flags$&1)===0){var t=nt(e);var n=t.$cmpMeta$;var r=j("connectedCallback",n.$tagName$);if(!(t.$flags$&1)){t.$flags$|=1;{if(n.$flags$&(4|8)){Xe(e)}}{var i=e;while(i=i.parentNode||i.host){if(i["s-p"]){Le(t,t.$ancestorComponent$=i);break}}}if(n.$members$){Object.entries(n.$members$).map((function(t){var n=t[0],r=t[1][0];if(r&31&&e.hasOwnProperty(n)){var i=e[n];delete e[n];e[n]=i}}))}{Je(e,t,n)}}else{b(e,t,n.$listeners$);if(m.$cssShim$&&e["s-sc"]){var a="sc-"+t.$cmpMeta$.$tagName$;var s=lt.get(a);var o=e["s-sc"];var f=m.$cssShim$.createHostStyle(e,a,s,true);var l=f["s-sc"];f.setAttribute("sty-id",l);var c=document.head;c.insertBefore(f,c.querySelector("link"));e["s-sc"]=l;e.classList.remove(o+"-h",o+"-s");e.classList.add(l+"-h",l+"-s");Array.from(e.querySelectorAll("."+o)).forEach((function(e){e.classList.remove(o,o+"-s");e.classList.add(l,l+"-s")}));m.$cssShim$.updateHost(e)}Ke(t.$lazyInstance$,e)}r()}};var Xe=function(e){var t=e["s-cr"]=h.createComment("");t["s-cn"]=true;if(!!e.firstChild)e.insertBefore(t,e.firstChild);else e.appendChild(t)};var Ye=function(e){if((m.$flags$&1)===0){var t=nt(e);var n=t.$lazyInstance$;{if(t.$rmListeners$){t.$rmListeners$.map((function(e){return e()}));t.$rmListeners$=undefined}}if(m.$cssShim$){m.$cssShim$.removeHost(e)}{ze(n,"disconnectedCallback",undefined,e)}}};var Ze=e("b",(function(e,t){if(t===void 0){t={}}var n=j();var r=[];var i=t.exclude||[];var a=d.customElements;var s=h.head;var o=s.querySelector("meta[charset]");var f=h.createElement("style");var l=[];var c;var u=true;Object.assign(m,t);m.$resourcesUrl$=new URL(t.resourcesUrl||"./",h.baseURI).href;e.map((function(e){return e[1].map((function(n){var s={$flags$:n[0],$tagName$:n[1],$members$:n[2],$listeners$:n[3]};{s.$members$=n[2]}{s.$listeners$=n[3]}{s.$attrsToReflect$=[]}{s.$watchers$={}}if(!g&&s.$flags$&1){s.$flags$|=8}var o=t.transformTagName?t.transformTagName(s.$tagName$):s.$tagName$;var f=function(e){__extends(t,e);function t(t){var n=e.call(this,t)||this;t=n;it(t,s);if(s.$flags$&1){if(g){{t.attachShadow({mode:"open"})}}else if(!("shadowRoot"in t)){t.shadowRoot=t}}return n}t.prototype.connectedCallback=function(){var e=this;if(c){clearTimeout(c);c=null}if(u){l.push(this)}else{m.jmp((function(){return Qe(e)}))}};t.prototype.disconnectedCallback=function(){var e=this;m.jmp((function(){return Ye(e)}))};t.prototype.componentOnReady=function(){return nt(this).$onReadyPromise$};return t}(HTMLElement);if(s.$flags$&4||s.$flags$&8){K(f.prototype);{J(f.prototype)}}s.$lazyBundleId$=e[0];if(!i.includes(o)&&!a.get(o)){r.push(o);a.define(o,Ge(f,s,1))}}))}));{f.innerHTML=r+T;f.setAttribute("data-styles","");s.insertBefore(f,o?o.nextSibling:s.firstChild)}u=false;if(l.length){l.map((function(e){return e.connectedCallback()}))}else{{m.jmp((function(){return c=setTimeout(De,30)}))}}n()}));var et=e("k",(function(e){var t=new URL(e,m.$resourcesUrl$);return t.origin!==d.location.origin?t.href:t.pathname}));var tt=new WeakMap;var nt=function(e){return tt.get(e)};var rt=e("r",(function(e,t){return tt.set(t.$lazyInstance$=e,t)}));var it=function(e,t){var n={$flags$:0,$hostElement$:e,$cmpMeta$:t,$instanceValues$:new Map};{n.$onInstancePromise$=new Promise((function(e){return n.$onInstanceResolve$=e}))}{n.$onReadyPromise$=new Promise((function(e){return n.$onReadyResolve$=e}));e["s-p"]=[];e["s-rc"]=[]}b(e,n,t.$listeners$);return tt.set(e,n)};var at=function(e,t){return t in e};var st=function(e,t){return(0,console.error)(e,t)};var ot=new Map;var ft=function(e,n,r){var i=e.$tagName$.replace(/-/g,"_");var a=e.$lazyBundleId$;var s=ot.get(a);if(s){return s[i]}return t.import("./"+a+".entry.js"+"").then((function(e){{ot.set(a,e)}return e[i]}),(function(e){st(e,n.$hostElement$)}))};var lt=new Map;var ct=[];var ut=[];var $t=function(e,t){return function(n){e.push(n);if(!$){$=true;if(t&&m.$flags$&4){ht(vt)}else{m.raf(vt)}}}};var dt=function(e){for(var t=0;t<e.length;t++){try{e[t](performance.now())}catch(n){st(n)}}e.length=0};var vt=function(){dt(ct);{dt(ut);if($=ct.length>0){m.raf(vt)}}};var ht=function(e){return y().then(e)};var pt=e("i",$t(ct,false));var mt=e("f",$t(ut,true));var gt=e("B",{isDev:false,isBrowser:true,isServer:false,isTesting:false})}}}));
+//# sourceMappingURL=p-af9f6453.system.js.map