@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/nano-components/nano-overflow-nav.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,g as i,a}from"./index-6cc72cd9.js";import{h as e}from"./renderer-4bc3e2dc.js";import{g as s,a as n}from"./dom-fafdec9a.js";import{d as o}from"./throttle-df960210.js";const r=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav .nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav .nano-icon-button.onav__scroll-button:focus{outline:none}.onav .nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav .nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:"";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=r;const c=class{scrollControls=true;orientation="horizontal";activeHandler=(t,i)=>t.classList.add("active");inActiveHandler=(t,i)=>t.classList.remove("active");isActiveHandler=(t,i)=>t.classList.contains("active");watchIsActiveHandler(){this.instantReCalc=true;this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));setTimeout((()=>this.instantReCalc=false),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i);this.recalculatePositions=o(this.recalculatePositions.bind(this),80)}ro;nav;itemContainer;isRtl;endBtn;startBtn;activeIndicator;mutationObservers=new WeakMap;get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}get host(){return i(this)}instantReCalc=false;hasScrollControls=false;watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideControlEnd=true;hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideControlStart=true;hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return s(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach(((t,i)=>{if(t===this._activeItem)this.activeHandler(t,i);else this.inActiveHandler(t,i)}));this.recalculatePositions()}_activeItem;get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(){if(!this.nav||!this.activeItem)return;setTimeout((()=>{this.activeItem.scrollIntoView({behavior:this.instantReCalc?"auto":"smooth",block:"center",inline:"center"})}),100)}syncActiveItemIndicator(){if(!this.activeItem)return;const t=this.activeItem;const i=t.clientWidth||0;const a=t.clientHeight+2||0;const e=n(t,this.itemContainer);if(!this.activeIndicator)return;const s=e.top;const o=e.left;if(this.instantReCalc)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${o}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${a}px`;this.activeIndicator.style.transform=`translateY(${s}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));if(t)this.activeItem=t;this.recalculatePositions();this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:true,childList:true,subtree:true});this.mutationObservers.set(t,i)}))};handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};recalculatePositions=()=>{this.updateScrollControls();this.syncActiveItemIndicator();this.scrollToActiveItem()};connectedCallback(){this.instantReCalc=true;this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(window["MutationObserver"])this.slotChangeHandler();if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));this.instantReCalc=false}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return e(a,{key:"b27e8a6ed628edcec4ca84db6898344848b7d203",dir:this.isRtl?"rtl":null,class:"nano-overflow-nav"},e("div",{key:"79200b5a21b1fdcc179fc3017b051af1bf82d17f",part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc},onClick:this.handleClick,onKeyDown:this.handleKeyDown},e("div",{key:"088d3d5bc04b251977ec0c389a4eef7657d11446",class:"onav__nav"},this.scrollControls&&e("nano-icon-button",{key:"c55c810110f8b357b330634b024c3f5dc44ebb3b",part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),e("div",{key:"9b65b0ccdb84eaf1afb28835e818039a961ef8c2",part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},e("div",{key:"320928d965a0dd203a7b1614b4ae4ec344719810",part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},e("div",{key:"0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4",part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),e("slot",{key:"28573efda6c8eb5995114f6063f57ad22e0646ed",onSlotchange:this.slotChangeHandler}))),this.scrollControls&&e("nano-icon-button",{key:"bba306fe285adc3d6af71bf07e1744c9790f9c51",part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}static get watchers(){return{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};c.style=l;export{c as nano_overflow_nav};
-//# sourceMappingURL=nano-overflow-nav.entry.js.map

package/dist/nano-components/nano-overflow-nav.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["overflowNavCss","NanoOverflowNavStyle0","OverflowNav","scrollControls","orientation","activeHandler","item","_index","classList","add","inActiveHandler","remove","isActiveHandler","contains","watchIsActiveHandler","this","instantReCalc","activeItem","allActiveItems","find","el","i","setTimeout","syncActiveItem","constructor","hostRef","recalculatePositions","debounce","bind","ro","nav","itemContainer","isRtl","endBtn","startBtn","activeIndicator","mutationObservers","WeakMap","scrollProp","clientDimProp","scrollOffset","hasScrollControls","watchScrollControls","handleScroll","hideControlStart","hideControlEnd","hideEndBtn","activateBtn","hideStartBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","includes","forEach","navDim","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","scrollToActiveItem","scrollIntoView","behavior","block","inline","syncActiveItemIndicator","width","clientWidth","height","clientHeight","offset","getOffset","offsetTop","top","offsetLeft","left","style","transition","transform","updateScrollControls","finishEnd","Math","abs","finishStart","handleBtnClick","goEnd","scrollAmt","scroll","_e","slotChangeHandler","length","get","mo","MutationObserver","observe","characterData","childList","subtree","set","handleClick","event","foundItem","composedPath","e","handleKeyDown","key","connectedCallback","closest","window","disconnect","undefined","ResizeObserver","componentDidLoad","disconnectedCallback","render","h","Host","dir","class","part","onav","onClick","onKeyDown","ref","label","iconName","onScroll","onSlotchange"],"sources":["src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --indicator-transition: Defaults to #{tokens.$transition-fast}\n  * @prop --indicator-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n  * @prop --indicator-size: Defaults to 0;\n  * @prop --indicator-track-color: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n  * @prop --scroll-btn-color: Defaults to 'currentColor';\n  * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n  * @prop --fade-transparency: Defaults to 0;\n  *\n  * @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n  */\n\n  --indicator-transition: #{tokens.$transition-fast};\n  --indicator-color: #{map.get(tokens.$colors, lightblue)};\n  --indicator-size: 0;\n  --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n  --indicator-track-size: var(--indicator-size);\n  --scroll-btn-color: 'currentColor';\n  --fade-size: 1.75rem;\n  --fade-transparency: 0;\n  --padding: var(--fade-size);\n\n  position: relative;\n  z-index: #{tokens.$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n  display: flex;\n}\n\n.onav {\n  $root: &;\n\n  &--no-transitions * {\n    transition-duration: 0s !important;\n  }\n\n  &__scroller {\n    @include mx.hide-scrollbar();\n\n    display: flex;\n    transition: #{tokens.$transition-medium} ease;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n    mask-size: calc(100% + calc(var(--fade-size) * 4));\n    mask-position: calc(var(--fade-size) * -2);\n\n    &::after {\n      content: ' ';\n      line-height: 1;\n      flex: 0 0 auto;\n      display: block;\n    }\n\n    #{$root}--has-scroll-controls-start & {\n      mask-position: 0;\n      mask-size: calc(100% + (var(--fade-size) * 2));\n    }\n\n    #{$root}--has-scroll-controls-end & {\n      mask-position: calc(var(--fade-size) * -1);\n      mask-size: calc(100% + var(--fade-size));\n    }\n\n    #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n      mask-size: 100%;\n      mask-position: 0;\n    }\n  }\n\n  &__items {\n    flex: 1 1 auto;\n    position: relative;\n    inline-size: auto;\n    flex-wrap: nowrap;\n    display: flex;\n\n    &::before {\n      content: '';\n      background: var(--indicator-track-color);\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  &__active-indicator {\n    position: absolute;\n    z-index: 10;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease,\n      var(--indicator-transition) height ease;\n  }\n\n  .nano-icon-button.onav__scroll-button {\n    --nano-color-base: var(--scroll-btn-color);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border: unset;\n    z-index: 2;\n    transition: #{tokens.$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n    pointer-events: none;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:focus-visible {\n      box-shadow: #{tokens.$control-focus-style} inset;\n    }\n  }\n\n  ///////////// HORIZONTAL ///////////////\n\n  &--horizontal {\n\n    #{$root}__scroller {\n      overflow: auto hidden;\n      mask-repeat: no-repeat;\n      padding-inline: var(--padding);\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n\n      &::after {\n        padding-inline: 0 var(--fade-size);\n        padding-block: 0;\n      }\n    }\n\n    &#{$root}--has-scroll-controls #{$root}__scroller {\n      padding-inline: var(--fade-size) 0;\n      padding-block: 0;\n    }\n\n    #{$root}__items {\n      flex-direction: row;\n\n      &::before {\n        content: '';\n        inline-size: 100%;\n        block-size: var(--indicator-track-size);\n        inset-block-end: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-block-end: 0;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-block: 0;\n\n      &--start {\n        inset-inline-start: 0;\n      }\n\n      &--end {\n        inset-inline-end: 0;\n      }\n    }\n  }\n\n  ///////////// VERTICAL ///////////////\n\n  &--vertical {\n    inline-size: 100%;\n\n    #{$root}__nav {\n      max-block-size: 100%;\n      display: flex;\n    }\n\n    #{$root}__scroller {\n      inline-size: 100%;\n      overflow: hidden auto;\n      flex-direction: column;\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to top,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      padding-inline: 0;\n      padding-block: calc(var(--fade-size) + 12px) var(--fade-size);\n\n      &::after {\n        padding-inline: 0;\n        padding-block: 0 var(--fade-size);\n      }\n    }\n\n    #{$root}__items {\n      flex-direction: column;\n      inline-size: fit-content;\n\n      &::before {\n        content: '';\n        block-size: 100%;\n        inline-size: var(--indicator-track-size);\n        inset-inline-start: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-inline-start: 0;\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-inline: 0;\n\n      &--start {\n        inset-block-start: 0;\n      }\n\n      &--end {\n        inset-block-end: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n  tag: 'nano-overflow-nav',\n  styleUrl: 'overflow-nav.scss',\n  shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n  // public surface\n\n  /** Disables the scroll arrow buttons that appear when content overflows */\n  @Prop() scrollControls = true;\n\n  /** The flex direction of the element */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * A function called when an item becomes 'active' (via click or keyboard)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n    item.classList.add('active');\n\n  /**\n   * A function called when an item becomes 'inactive'\n   * (because another item was made active)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.remove('active');\n\n  /**\n   * A function called to assess an initial, active item\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.contains('active');\n\n  @Watch('isActiveHandler')\n  watchIsActiveHandler() {\n    this.instantReCalc = true;\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    setTimeout(() => (this.instantReCalc = false), 300);\n  }\n\n  /**\n   * Sync up the view to the active item.\n   * Use this when the active item changes outside of this component.\n   */\n  @Method()\n  async syncActiveItem() {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n  }\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(\n      this.recalculatePositions.bind(this),\n      80\n    );\n  }\n\n  private ro?: ResizeObserver;\n  private nav?: HTMLElement;\n  private itemContainer?: HTMLElement;\n  private isRtl?: boolean;\n  private endBtn: HTMLNanoIconButtonElement;\n  private startBtn: HTMLNanoIconButtonElement;\n  private activeIndicator: HTMLElement;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  get scrollProp() {\n    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n  }\n\n  get clientDimProp() {\n    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n  }\n\n  get scrollOffset() {\n    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n  }\n\n  @Element() host: HTMLNanoOverflowNavElement;\n\n  @State() instantReCalc = false;\n  @State() hasScrollControls = false;\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) this.handleScroll();\n    else this.hideControlStart = this.hideControlEnd = true;\n  }\n\n  @State() hideControlEnd = true;\n\n  @Watch('hideControlEnd')\n  hideEndBtn() {\n    if (!this.endBtn) return;\n    this.activateBtn(this.endBtn, !this.hideControlEnd);\n  }\n\n  @State() hideControlStart = true;\n\n  @Watch('hideControlStart')\n  hideStartBtn() {\n    if (!this.startBtn) return;\n    this.activateBtn(this.startBtn, !this.hideControlStart);\n  }\n\n  // private logic\n\n  private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n    if (!activate) {\n      btn.tabIndex = -1;\n      btn.disabled = true;\n      btn.classList.remove('is-shown');\n      return;\n    }\n    btn.tabIndex = 0;\n    btn.disabled = false;\n    btn.classList.add('is-shown');\n  }\n\n  get allActiveItems() {\n    return this.allItems.filter(\n      (el: any) => !el.disabled || el.classList.contains('disabled')\n    );\n  }\n\n  get allItems() {\n    return getDirectChildren<HTMLElement>(this.host, '*', true);\n  }\n\n  get activeItem() {\n    return this._activeItem;\n  }\n\n  set activeItem(item: HTMLElement) {\n    if (\n      !item ||\n      item === this.activeItem ||\n      (item as any).disabled ||\n      !this.allActiveItems.includes(item)\n    ) {\n      return;\n    }\n\n    this._activeItem = item;\n    this.allActiveItems.forEach((el, i) => {\n      if (el === this._activeItem) this.activeHandler(el, i);\n      else this.inActiveHandler(el, i);\n    });\n\n    this.recalculatePositions();\n  }\n  private _activeItem: HTMLElement;\n\n  get navDim() {\n    if (!this.nav) return 0;\n\n    const computedStyle = getComputedStyle(this.nav);\n    let clientDim = this.nav[this.clientDimProp];\n\n    if (this.orientation === 'horizontal') {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingLeft) +\n        parseFloat(computedStyle.paddingRight));\n    } else {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingTop) +\n        parseFloat(computedStyle.paddingBottom));\n    }\n  }\n\n  private scrollToActiveItem() {\n    if (!this.nav || !this.activeItem) return;\n    setTimeout(() => {\n      this.activeItem.scrollIntoView({\n        behavior: this.instantReCalc ? 'auto' : 'smooth',\n        block: 'center',\n        inline: 'center',\n      });\n    }, 100);\n  }\n\n  private syncActiveItemIndicator() {\n    if (!this.activeItem) return;\n\n    const item = this.activeItem;\n    const width = item.clientWidth || 0;\n    const height = item.clientHeight + 2 || 0;\n    const offset = getOffset(item, this.itemContainer);\n\n    if (!this.activeIndicator) return;\n\n    const offsetTop = offset.top;\n    const offsetLeft = offset.left;\n\n    if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n    switch (this.orientation) {\n      case 'horizontal':\n        this.activeIndicator.style.width = `${width}px`;\n        this.activeIndicator.style.height = null;\n        this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'vertical':\n        this.activeIndicator.style.width = null;\n        this.activeIndicator.style.height = `${height}px`;\n        this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n    setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n  }\n\n  private updateScrollControls = () => {\n    if (!this.nav) return;\n\n    this.hasScrollControls =\n      this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n      this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n    this.handleScroll();\n  };\n\n  private handleScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlStart = this.hideControlEnd = true;\n      return;\n    }\n    const finishEnd = this.isRtl\n      ? this.nav[this.scrollOffset] === 0\n      : Math.abs(\n          this.nav[this.clientDimProp] -\n            (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n        ) < 2;\n\n    const finishStart = this.isRtl\n      ? Math.abs(\n          this.nav[this.scrollProp] +\n            this.nav[this.scrollOffset] -\n            this.nav[this.clientDimProp]\n        ) < 2\n      : this.nav[this.scrollOffset] === 0;\n\n    if (finishStart) {\n      this.hideControlStart = true;\n      this.hideControlEnd = false;\n    } else if (finishEnd) {\n      this.hideControlStart = false;\n      this.hideControlEnd = true;\n    } else {\n      this.hideControlEnd = false;\n      this.hideControlStart = false;\n    }\n  };\n\n  private handleBtnClick = (goEnd: boolean = false) => {\n    const navDim = this.navDim;\n    let scrollAmt;\n    if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n    else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n    try {\n      this.nav.scroll({\n        left: this.orientation === 'horizontal' ? scrollAmt : 0,\n        top: this.orientation === 'vertical' ? scrollAmt : 0,\n        behavior: 'smooth',\n      });\n    } catch (_e) {\n      this.nav[this.scrollOffset] = scrollAmt;\n    }\n  };\n\n  private slotChangeHandler = () => {\n    if (this.allActiveItems.length < 2) return;\n    const item = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    if (item) this.activeItem = item;\n    this.recalculatePositions();\n\n    /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n    this.allActiveItems.forEach((item) => {\n      if (this.mutationObservers.get(item)) return;\n\n      const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n      mo.observe(item, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.mutationObservers.set(item, mo);\n    });\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.allActiveItems.length < 2) return;\n    const foundItem = event\n      .composedPath()\n      .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n    if (foundItem) this.activeItem = foundItem;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const foundItem = event\n        .composedPath()\n        .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n      if (foundItem) this.activeItem = foundItem;\n    }\n  };\n\n  private recalculatePositions = () => {\n    this.updateScrollControls();\n    this.syncActiveItemIndicator();\n    this.scrollToActiveItem();\n  };\n\n  // lifecycle\n\n  connectedCallback(): void {\n    this.instantReCalc = true;\n    this.isRtl =\n      this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n    if (window['MutationObserver']) this.slotChangeHandler();\n\n    if (!window['ResizeObserver']) return;\n\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n    const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n    mo.observe(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    this.instantReCalc = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host dir={this.isRtl ? 'rtl' : null} class=\"nano-overflow-nav\">\n        <div\n          part=\"base\"\n          class={{\n            onav: true,\n            [`onav--${this.orientation}`]: true,\n            'onav--has-scroll-controls': this.hasScrollControls,\n            'onav--has-scroll-controls-start': !this.hideControlStart,\n            'onav--has-scroll-controls-end': !this.hideControlEnd,\n            'onav--no-transitions': this.instantReCalc,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"onav__nav\">\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-prev\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--start': true,\n                }}\n                ref={(btn) => (this.startBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-left'\n                    : 'light/chevron-up'\n                }\n              />\n            )}\n\n            <div\n              part=\"scroller\"\n              ref={(el) => (this.nav = el)}\n              class=\"onav__scroller\"\n              onScroll={this.handleScroll}\n            >\n              <div\n                part=\"items\"\n                ref={(el) => (this.itemContainer = el)}\n                class=\"onav__items\"\n              >\n                <div\n                  part=\"indicator\"\n                  ref={(el) => (this.activeIndicator = el)}\n                  class=\"onav__active-indicator\"\n                />\n                <slot onSlotchange={this.slotChangeHandler} />\n              </div>\n            </div>\n\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-next\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--end': true,\n                }}\n                ref={(btn) => (this.endBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-right'\n                    : 'light/chevron-down'\n                }\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-progress-bar.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","NanoProgressBarStyle0","ProgressBar","value","indeterminate","showPercent","render","h","Host","key","class","part","this","role","title","host","undefined","style","width"],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  block-size: var(--height);\n  border-radius: tokens.$layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  block-size: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class=\"nano-progress-bar\">\n        <div\n          part=\"base\"\n          class={{\n            'progress-bar': true,\n            'progress-bar--indeterminate': this.indeterminate,\n          }}\n          role=\"progressbar\"\n          title={this.host.title || undefined}\n          aria-label=\"Progress\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={this.indeterminate ? null : this.value}\n        >\n          <div\n            part=\"indicator\"\n            class=\"progress-bar__indicator\"\n            style={{\n              width: !this.indeterminate ? `${this.value}%` : undefined,\n            }}\n          >\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot>\n                {!this.indeterminate && this.showPercent\n                  ? `${this.value}%`\n                  : ''}\n              </slot>\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;uFAAA,MAAMA,EAAiB,iqCACvB,MAAAC,EAAeD,E,MCiBFE,EAAW,M,mDAIdC,MAAQ,EAGRC,cAAgB,MAGhBC,YAAc,MAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,OAAAE,IAAA,2CACEE,KAAK,OACLD,MAAO,CACL,eAAgB,KAChB,8BAA+BE,KAAKR,eAEtCS,KAAK,cACLC,MAAOF,KAAKG,KAAKD,OAASE,UAAS,aACxB,WAAU,gBACP,IAAG,gBACH,MAAK,gBACJJ,KAAKR,cAAgB,KAAOQ,KAAKT,OAEhDI,EAAA,OAAAE,IAAA,2CACEE,KAAK,YACLD,MAAM,0BACNO,MAAO,CACLC,OAAQN,KAAKR,cAAgB,GAAGQ,KAAKT,SAAWa,YAGlDT,EAAA,QAAAE,IAAA,2CAAME,KAAK,QAAQD,MAAM,uBACvBH,EAAA,QAAAE,IAAA,6CACIG,KAAKR,eAAiBQ,KAAKP,YACzB,GAAGO,KAAKT,SACR,O","ignoreList":[]}

package/dist/nano-components/nano-range.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["renderHiddenInput","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","rangeCss","NanoRangeStyle0","Range","noUpdate","rect","hasFocus","rangeSlider","gesture","ratioA","ratioB","pressedKnob","color","debounce","debounceChanged","this","nanoChange","debounceEvent","dualKnobs","min","minChanged","updateRatio","max","maxChanged","pin","snaps","step","ticks","disabledChanged","enable","emitStyle","valueChanged","ensureValueInBounds","emit","clampBounds","clamp","lower","upper","nanoStyle","nanoFocus","nanoBlur","connectedCallback","disconnectedCallback","destroy","undefined","componentDidLoad","import","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","handleKeyboard","knob","isIncrease","updateValue","getValue","interactive","detail","getBoundingClientRect","currentX","ratio","left","width","document","dir","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","shadowRoot","knobEl","focus","onBlur","onFocus","render","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","ref","rangeEl","map","style","role","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","tabindex","round"],"sources":["src/utils/form.ts","src/components/range/range.scss?tag=nano-range&encapsulation=scoped","src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  let input: HTMLInputElement = container.querySelector('input.aux-input');\n  if (!input) {\n    input = container.ownerDocument.createElement('input');\n    input.type = 'hidden';\n    input.classList.add('aux-input');\n    container.appendChild(input);\n  }\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n};\n","@use '../../global/style/utilities/colours' as color;\n@use '../../global/style/nano-theme/tokens';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color.color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{tokens.nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{tokens.nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{tokens.nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{tokens.$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color.color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{tokens.nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{tokens.nano-color(primary, base)};\n  --pin-color: #{tokens.nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{tokens.$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  ::slotted([slot='start']) {\n    margin-inline: 0 14px;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n\n  ::slotted([slot='end']) {\n    margin-inline: 14px 0;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  inline-size: 100%;\n  block-size: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  border-radius: var(--bar-border-radius);\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inset-inline-start: 0;\n  position: absolute;\n  inline-size: 100%;\n  block-size: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n\n  :host(.range-snaps) & {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n}\n\n.range-bar-active {\n  inset-block-end: 0;\n  inline-size: auto;\n  background: var(--bar-background-active);\n}\n\n// knob\n\n.range-knob {\n  border-radius: var(--knob-border-radius);\n  inset-block-start: calc(50% - var(--knob-size) / 2);\n  inset-inline-start: calc(50% - var(--knob-size) / 2);\n  position: absolute;\n  inline-size: var(--knob-size);\n  block-size: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n  inset-inline-start: 0;\n  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n  position: absolute;\n  inline-size: calc(var(--knob-handle-size));\n  block-size: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inline-size: var(--bar-height);\n  block-size: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-inline-size: 2.33em;\n  block-size: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    inset-block-start: 0.25em;\n    inset-inline-start: 50%;\n    margin-inline-start: -1.08em;\n    border-radius: 50% 50% 50% 0;\n    position: absolute;\n    inline-size: 2.16em;\n    block-size: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: color.current-color(base);\n    color: color.current-color(contrast);\n  }\n\n  .range-bar {\n    background: color.current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px color.current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport {\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n} from './range-interface';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  StyleEventDetail,\n} from '../../types/shared';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl: HTMLElement = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      );\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n          'nano-range': true,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-rating.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ratingCss","NanoRatingStyle0","Rating","rating","isRtl","indicator","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_number","this","handleValueChange","nanoChange","emit","handleSymbolChange","_","nanoBlur","nanoFocus","setFocus","focus","removeFocus","blur","getValueFromMousePosition","event","containerLeft","getBoundingClientRect","left","containerWidth","width","num","roundToPrecision","clientX","clamp","numberToRound","multiplier","Math","ceil","handleClick","newValue","handleKeyDown","key","decrement","shiftKey","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","handleMouseMove","clip","displayValue","tw","componentDidLoad","focusVisible","observe","setTimeout","style","connectedCallback","host","dir","ownerDocument","disconnectedCallback","unobserve","render","counter","Array","from","keys","h","Host","class","ref","el","part","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","innerHTML","span","type"],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n  */\n\n  --symbol-color: #{map.get(tokens.$colors, palegrey)};\n  --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{tokens.$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0;\n  margin-inline: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(.nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  ComponentInterface,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    if (!this.symbol)\n      this.symbol = (_: number) =>\n        '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <Host class=\"nano-rating\">\n        <div class=\"rating-wrap\">\n          <div\n            dir={this.isRtl ? 'rtl' : null}\n            ref={(el) => (this.rating = el)}\n            part=\"base\"\n            class={{\n              rating: true,\n              'rating--readonly': this.readonly,\n              'rating--disabled': this.disabled,\n            }}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            aria-readonly={this.readonly ? 'true' : 'false'}\n            aria-valuenow={this.value}\n            aria-valuemin={0}\n            aria-valuemax={this.max}\n            tabIndex={this.disabled ? -1 : 0}\n            onClick={this.handleClick}\n            onKeyDown={this.handleKeyDown}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span class=\"rating__symbols rating__symbols--inactive\">\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                  // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                  // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                  onMouseEnter={this.handleMouseEnter}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n\n            <span\n              ref={(span) => (this.indicator = span)}\n              class=\"rating__symbols rating__symbols--indicator\"\n              style={{\n                clip: this.clip(displayValue),\n              }}\n            >\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled || this.readonly}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-resize-observe_2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ResizeObserve","ro","appliedStates","isReady","currentWidth","currentHeight","classNames","contentFitX","contentFitY","classNameChange","this","host","className","join","includes","nanoResizeObserverReady","emit","notifyContentFit","states","newStatesProp","statesChanged","nanoResizeStateChange","nanoResizeContentFitChange","nanoResize","dimensionChanged","assessChanges","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","bp","parseInt","dir","h","Map","w","map","st","trim","key","classes","set","applied","assesContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","scrollHeight","x","y","readTask","changedStates","hasChanged","Object","keys","forEach","dimType","dim","state","applyChanges","changes","push","cl","toSimpleObj","stateMaps","retObj","attachRO","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","class","name","skeletonCss","NanoSkeletonStyle0","Skeleton","animated","skeleton","animate"],"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from './resize-observe-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.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `:host { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\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\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 assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\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    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\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) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...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    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-resize-observe\">\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens/components' as cmps;\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{cmps.$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: #{cmps.$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: 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  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, ComponentInterface, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\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      <Host class=\"nano-skeleton\">\n        <div\n          class={{\n            skeleton: true,\n            animate: this.animated,\n          }}\n        >\n          <div class=\"skeleton__indicator\">&nbsp;</div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-slide.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["slideCss","NanoSlideStyle0","Slide","nanoSlideReady","ready","readyChange","newReady","oldReady","this","emit","componentDidLoad","setTimeout","render","h","Host","key","class"],"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  min-block-size: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n  flex-direction: column;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n\n:host(:not([ready])) {\n  flex: 1 0 auto;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-slide\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;iGAAA,MAAMA,EAAW,gfACjB,MAAAC,EAAeD,E,MCeFE,EAAK,M,wEAIPC,eAM+BC,MAAwB,KAGhE,WAAAC,CAAYC,EAA0BC,GACpC,UACSA,IAAa,aACpBA,IAAa,OACbD,IAAa,KACb,CACAE,KAAKL,eAAeM,M,EAIxB,gBAAAC,GAEE,UAAWF,KAAKJ,QAAU,UAAW,OACrCO,YAAW,KACTH,KAAKL,eAAeM,OACpBD,KAAKJ,MAAQ,IAAI,G,CAIrB,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACVH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/nano-components/nano-slides-2715825b.js

@@ -1,20 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,g as s,e as n,d as e,a as o}from"./index-6cc72cd9.js";import{t as h,h as c}from"./renderer-4bc3e2dc.js";function r(){}const f=r.prototype;f.on=function(t,i){if(!t||!i){return}const s=this._events=this._events||{};const n=s[t]=s[t]||[];if(n.indexOf(i)==-1){n.push(i)}return this};f.once=function(t,i){if(!t||!i){return}this.on(t,i);const s=this._onceEvents=this._onceEvents||{};const n=s[t]=s[t]||{};n[i]=true;return this};f.off=function(t,i){const s=this._events&&this._events[t];if(!s||!s.length){return}const n=s.indexOf(i);if(n!=-1){s.splice(n,1)}return this};f.emitEvent=function(t,i){let s=this._events&&this._events[t];if(!s||!s.length){return}s=s.slice(0);i=i||[];const n=this._onceEvents&&this._onceEvents[t];for(let e=0;e<s.length;e++){const o=s[e];const h=n&&n[o];if(h){this.off(t,o);delete n[o]}o.apply(this,i)}return this};f.allOff=function(){delete this._events;delete this._onceEvents};
-/*!
- * getSize v2.0.3
- * measure size of elements
- * MIT license
- */function u(t){const i=parseFloat(t);const s=t.indexOf("%")==-1&&!isNaN(i);return s&&i}function a(){}const l=typeof console=="undefined"?a:function(t){console.error(t)};const d=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"];const p=d.length;function y(){const t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0};for(let i=0;i<p;i++){const s=d[i];t[s]=0}return t}function b(t){const i=getComputedStyle(t);if(!i){l("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? "+"See https://bit.ly/getsizebug1")}return i}let g=false;let k;function m(){if(g){return}g=true;const t=document.createElement("div");t.style.width="200px";t.style.padding="1px 2px 3px 4px";t.style.borderStyle="solid";t.style.borderWidth="1px 2px 3px 4px";t.style.boxSizing="border-box";const i=document.body||document.documentElement;i.appendChild(t);const s=b(t);k=Math.round(u(s.width))==200;w.isBoxSizeOuter=k;i.removeChild(t)}function w(t){m();if(typeof t=="string"){t=document.querySelector(t)}if(!t||typeof t!="object"||!t.nodeType){return}const i=b(t);if(i.display=="none"){return y()}const s={};s.width=t.offsetWidth;s.height=t.offsetHeight;const n=s.isBorderBox=i.boxSizing=="border-box";for(let t=0;t<p;t++){const n=d[t];const e=i[n];const o=parseFloat(e);s[n]=!isNaN(o)?o:0}const e=s.paddingLeft+s.paddingRight;const o=s.paddingTop+s.paddingBottom;const h=s.marginLeft+s.marginRight;const c=s.marginTop+s.marginBottom;const r=s.borderLeftWidth+s.borderRightWidth;const f=s.borderTopWidth+s.borderBottomWidth;const a=n&&k;const l=u(i.width);if(l!==false){s.width=l+(a?0:e+r)}const g=u(i.height);if(g!==false){s.height=g+(a?0:o+f)}s.innerWidth=s.width-(e+r);s.innerHeight=s.height-(o+f);s.outerWidth=s.width+h;s.outerHeight=s.height+c;return s}const v={};v.extend=function(t,i){for(const s in i){t[s]=i[s]}return t};v.docReady=function(t){const i=document.readyState;if(i=="complete"||i=="interactive"){setTimeout(t)}else{document.addEventListener("DOMContentLoaded",t)}};v.toDashed=function(t){return t.replace(/(.)([A-Z])/g,(function(t,i,s){return i+"-"+s})).toLowerCase()};v.modulo=function(t,i){return(t%i+i)%i};const x=Array.prototype.slice;v.makeArray=function(t){if(Array.isArray(t)){return t}if(t===null||t===undefined){return[]}const i=typeof t=="object"&&typeof t.length=="number";if(i){return x.call(t)}return[t]};v.getParent=function(t,i){while(t.parentNode&&t!=document.body){t=t.parentElement;if(t.matches(i)){return t}}};v.getQueryElement=function(t){if(typeof t=="string"){return document.querySelector(t)}return t};v.handleEvent=function(t){const i="on"+t.type;if(this[i]){this[i](t)}};v.filterFindElements=function(t,i){t=v.makeArray(t);const s=[];t.forEach((function(t){if(!(t instanceof HTMLElement)){return}if(!i){s.push(t);return}if(t.matches(i)){s.push(t)}const n=t.querySelectorAll(i);for(let t=0;t<n.length;t++){s.push(n[t])}}));return s};v.debounceMethod=function(t,i,s){s=s||100;const n=t.prototype[i];const e=i+"Timeout";t.prototype[i]=function(...t){const i=this[e];clearTimeout(i);const o=this;this[e]=setTimeout((function(){n.apply(o,t);delete o[e]}),s)}};const S=window.console;v.htmlInit=function(t,i){v.docReady((function(){const s=v.toDashed(i);const n="data-"+s;const e=document.querySelectorAll("["+n+"]");const o=document.querySelectorAll(".js-"+s);const h=v.makeArray(e).concat(v.makeArray(o));const c=n+"-options";h.forEach((function(i){const s=i.getAttribute(n)||i.getAttribute(c);let e;try{e=s&&JSON.parse(s)}catch(t){if(S){S.error("Error parsing "+n+" on "+i.className+": "+t)}return}new t(i,e)}))}))};function z(t,i){this.element=t;this.parent=i;this.create()}const M=z.prototype;M.create=function(){this.element.style.position="absolute";this.element.setAttribute("aria-hidden","true");this.x=0;this.shift=0;Array.from(this.element.querySelectorAll("*")).forEach((t=>{t.setAttribute("tabindex","-1")}))};M.destroy=function(){this.unselect();this.element.style.position="";const t=this.parent.originSide;this.element.style[t]=""};M.getSize=function(){this.size=w(this.element)};M.setPosition=function(t){this.x=t;this.updateTarget();this.renderPosition(t)};M.updateTarget=M.setDefaultTarget=function(){const t=this.parent.originSide=="left"?"marginLeft":"marginRight";this.target=this.x+this.size[t]+this.size.width*this.parent.cellAlign};M.renderPosition=function(t){const i=this.parent.originSide;this.element.style[i]=this.parent.getPositionValue(t)};M.select=function(){this.element.classList.add("is-selected");this.element.removeAttribute("aria-hidden");Array.from(this.element.querySelectorAll("*")).forEach((t=>{t.removeAttribute("tabindex")}))};M.unselect=function(){this.element.classList.remove("is-selected");this.element.setAttribute("aria-hidden","true");Array.from(this.element.querySelectorAll("*")).forEach((t=>{t.setAttribute("tabindex","-1")}))};M.wrapShift=function(t){this.shift=t;this.renderPosition(this.x+this.parent.slideableWidth*t)};M.remove=function(){this.element.parentNode.removeChild(this.element)};function C(t){this.parent=t;this.isOriginLeft=t.originSide=="left";this.cells=[];this.outerWidth=0;this.height=0}const T=C.prototype;T.addCell=function(t){this.cells.push(t);this.outerWidth+=t.size.outerWidth;this.height=Math.max(t.size.outerHeight,this.height);if(this.cells.length==1){this.x=t.x;const i=this.isOriginLeft?"marginLeft":"marginRight";this.firstMargin=t.size[i]}};T.updateTarget=function(){const t=this.isOriginLeft?"marginRight":"marginLeft";const i=this.getLastCell();const s=i?i.size[t]:0;const n=this.outerWidth-(this.firstMargin+s);this.target=this.x+this.firstMargin+n*this.parent.cellAlign};T.getLastCell=function(){return this.cells[this.cells.length-1]};T.select=function(){this.cells.forEach((function(t){t.select()}))};T.unselect=function(){this.cells.forEach((function(t){t.unselect()}))};T.getCellElements=function(){return this.cells.map((function(t){return t.element}))};const L={};L.startAnimation=function(){if(this.isAnimating){return}this.isAnimating=true;this.restingFrames=0;this.animate()};L.animate=function(){this.applyDragForce();this.applySelectedAttraction();const t=this.x;this.integratePhysics();this.positionSlider();this.settle(t);if(this.isAnimating){const t=this;requestAnimationFrame((function i(){t.animate()}))}};L.positionSlider=function(){let t=this.x;if(this.options.wrapAround&&this.cells.length>1){t=v.modulo(t,this.slideableWidth);t=t-this.slideableWidth;this.shiftWrapCells(t)}this.setTranslateX(t,this.isAnimating);this.dispatchScrollEvent()};L.setTranslateX=function(t,i){t+=this.cursorPosition;t=this.options.rightToLeft?-t:t;const s=this.getPositionValue(t);this.slider.style.transform="translate3d("+s+",0,0)"};L.dispatchScrollEvent=function(){const t=this.slides[0];if(!t){return}const i=-this.x-t.target;const s=i/this.slidesWidth;this.dispatchEvent("scroll",null,[s,i])};L.positionSliderAtSelected=function(){if(!this.cells.length){return}this.x=-this.selectedSlide.target;this.velocity=0;this.positionSlider()};L.getPositionValue=function(t){if(this.options.percentPosition){return Math.round(t/this.size.innerWidth*1e4)*.01+"%"}else{return Math.round(t)+"px"}};L.settle=function(t){if(!this.isPointerDown&&Math.round(this.x*100)==Math.round(t*100)){this.restingFrames++}if(this.restingFrames>2){this.isAnimating=false;delete this.isFreeScrolling;this.positionSlider();this.dispatchEvent("settle",null,[this.selectedIndex])}};L.shiftWrapCells=function(t){const i=this.cursorPosition+t;this._shiftCells(this.beforeShiftCells,i,-1);const s=this.size.innerWidth-(t+this.slideableWidth+this.cursorPosition);this._shiftCells(this.afterShiftCells,s,1)};L._shiftCells=function(t,i,s){for(let n=0;n<t.length;n++){const e=t[n];const o=i>0?s:0;e.wrapShift(o);i-=e.size.outerWidth}};L._unshiftCells=function(t){if(!t||!t.length){return}for(let i=0;i<t.length;i++){t[i].wrapShift(0)}};L.integratePhysics=function(){this.x+=this.velocity;this.velocity*=this.getFrictionFactor()};L.applyForce=function(t){this.velocity+=t};L.getFrictionFactor=function(){return 1-this.options[this.isFreeScrolling?"freeScrollFriction":"friction"]};L.getRestingPosition=function(){return this.x+this.velocity/(1-this.getFrictionFactor())};L.applyDragForce=function(){if(!this.isDraggable||!this.isPointerDown){return}const t=this.dragX-this.x;const i=t-this.velocity;this.applyForce(i)};L.applySelectedAttraction=function(){const t=this.isDraggable&&this.isPointerDown;if(t||this.isFreeScrolling||!this.slides.length){return}const i=this.selectedSlide.target*-1-this.x;const s=i*this.options.selectedAttraction;this.applyForce(s)};const E=L;const A=window.getComputedStyle;const P=window.console;function D(t,i){t=v.makeArray(t);while(t.length){i.appendChild(t.shift())}}let R=0;const F={};function O(t,i){const s=v.getQueryElement(t);if(!s){if(P){P.error("Bad element for Flickity: "+(s||t))}return}this.element=s;if(this.element.flickityGUID){const t=F[this.element.flickityGUID];if(!F[this.element.flickityGUID])return;t.option(i);return t}this.options=v.extend({},this.constructor.defaults);this.option(i);this._create()}O.defaults={accessibility:true,cellAlign:"center",freeScrollFriction:.075,friction:.28,namespaceJQueryEvents:true,percentPosition:true,resize:true,selectedAttraction:.025,setGallerySize:true};O.createMethods=[];const j=O.prototype;v.extend(j,r.prototype);j._create=function(){const t=this.guid=++R;this.element.flickityGUID=t;F[t]=this;this.selectedIndex=0;this.restingFrames=0;this.x=0;this.velocity=0;this.originSide=this.options.rightToLeft?"right":"left";this.viewport=document.createElement("div");this.viewport.className="flickity-viewport";this.viewport.part.add("slide-viewport");this._createSlider();if(this.options.resize||this.options.watchCSS){window.addEventListener("resize",this)}for(const t in this.options.on){const i=this.options.on[t];this.on(t,i)}O.createMethods.forEach((function(t){this[t]()}),this);if(this.options.watchCSS){this.watchCSS()}else{this.activate()}};j.option=function(t){v.extend(this.options,t)};j.activate=function(){if(this.isActive){return}this.isActive=true;this.element.classList.add("flickity-enabled");if(this.options.rightToLeft){this.element.classList.add("flickity-rtl")}this.getSize();const t=this.element.children;D(t,this.slider);this.viewport.appendChild(this.slider);this.element.appendChild(this.viewport);this.reloadCells();if(this.options.accessibility){this.element.tabIndex=0;this.element.addEventListener("keydown",this)}this.emitEvent("activate");this.selectInitialIndex();this.isInitActivated=true;this.dispatchEvent("ready")};j._createSlider=function(){const t=document.createElement("div");t.className="flickity-slider";t.style[this.originSide]=0;this.slider=t};j._filterFindCellElements=function(t){return v.filterFindElements(t,this.options.cellSelector)};j.reloadCells=function(){this.cells=this._makeCells(this.slider.getRootNode().host?this.slider.getRootNode().host.children:this.slider.children);this.positionCells();this._getWrapShiftCells();this.setGallerySize()};j._makeCells=function(t){const i=this._filterFindCellElements(t);const s=i.map((function(t){return new z(t,this)}),this);return s};j.getLastCell=function(){return this.cells[this.cells.length-1]};j.getLastSlide=function(){return this.slides[this.slides.length-1]};j.positionCells=function(){this._sizeCells(this.cells);this._positionCells(0)};j._positionCells=function(t){t=t||0;this.maxCellHeight=t?this.maxCellHeight||0:0;let i=0;if(t>0){const s=this.cells[t-1];i=s.x+s.size.outerWidth}const s=this.cells.length;for(let n=t;n<s;n++){const t=this.cells[n];t.setPosition(i);i+=t.size.outerWidth;this.maxCellHeight=Math.max(t.size.outerHeight,this.maxCellHeight)}this.slideableWidth=i;this.updateSlides();this._containSlides();this.slidesWidth=s?this.getLastSlide().target-this.slides[0].target:0};j._sizeCells=function(t){t.forEach((function(t){t.getSize()}))};j.updateSlides=function(){this.slides=[];if(!this.cells.length){return}let t=new C(this);this.slides.push(t);const i=this.originSide=="left";const s=i?"marginRight":"marginLeft";const n=this._getCanCellFit();this.cells.forEach((function(i,e){if(!t.cells.length){t.addCell(i);return}const o=t.outerWidth-t.firstMargin+(i.size.outerWidth-i.size[s]);if(n.call(this,e,o)){t.addCell(i)}else{t.updateTarget();t=new C(this);this.slides.push(t);t.addCell(i)}}),this);t.updateTarget();this.updateSelectedSlide()};j._getCanCellFit=function(){const t=this.options.groupCells;if(!t){return function(){return false}}else if(typeof t=="number"){const i=parseInt(t,10);return function(t){return t%i!==0}}const i=typeof t=="string"&&t.match(/^(\d+)%$/);const s=i?parseInt(i[1],10)/100:1;return function(t,i){return i<=(this.size.innerWidth+1)*s}};j._init=j.reposition=function(){this.positionCells();this.positionSliderAtSelected()};j.getSize=function(){this.size=w(this.element);this.setCellAlign();this.cursorPosition=this.size.innerWidth*this.cellAlign};const N={center:{left:.5,right:.5},left:{left:0,right:1},right:{right:0,left:1}};j.setCellAlign=function(){const t=N[this.options.cellAlign];this.cellAlign=t?t[this.originSide]:this.options.cellAlign};j.setGallerySize=function(){if(this.options.setGallerySize){const t=this.options.adaptiveHeight&&this.selectedSlide?this.selectedSlide.height:this.maxCellHeight;this.viewport.style.height=t+"px"}};j._getWrapShiftCells=function(){if(!this.options.wrapAround){return}this._unshiftCells(this.beforeShiftCells);this._unshiftCells(this.afterShiftCells);let t=this.cursorPosition;const i=this.cells.length-1;this.beforeShiftCells=this._getGapCells(t,i,-1);t=this.size.innerWidth-this.cursorPosition;this.afterShiftCells=this._getGapCells(t,0,1)};j._getGapCells=function(t,i,s){const n=[];while(t>0){const e=this.cells[i];if(!e){break}n.push(e);i+=s;t-=e.size.outerWidth}return n};j._containSlides=function(){if(!this.options.contain||this.options.wrapAround||!this.cells.length){return}const t=this.options.rightToLeft;const i=t?"marginRight":"marginLeft";const s=t?"marginLeft":"marginRight";const n=this.slideableWidth-this.getLastCell().size[s];const e=n<this.size.innerWidth;const o=this.cursorPosition+this.cells[0].size[i];const h=n-this.size.innerWidth*(1-this.cellAlign);this.slides.forEach((function(t){if(e){t.target=n*this.cellAlign}else{t.target=Math.max(t.target,o);t.target=Math.min(t.target,h)}}),this)};j.dispatchEvent=function(t,i,s){const n=i?[i].concat(s):s;this.emitEvent(t,n)};j.select=function(t,i,s){if(!this.isActive){return}t=parseInt(t,10);this._wrapSelect(t);if(this.options.wrapAround||i){t=v.modulo(t,this.slides.length)}if(!this.slides[t]){return}const n=this.selectedIndex;this.selectedIndex=t;this.updateSelectedSlide();if(s){this.positionSliderAtSelected()}else{this.startAnimation()}if(this.options.adaptiveHeight){this.setGallerySize()}this.dispatchEvent("select",null,[t]);if(t!=n){this.dispatchEvent("change",null,[t])}this.dispatchEvent("cellSelect")};j._wrapSelect=function(t){const i=this.slides.length;const s=this.options.wrapAround&&i>1;if(!s){return t}const n=v.modulo(t,i);const e=Math.abs(n-this.selectedIndex);const o=Math.abs(n+i-this.selectedIndex);const h=Math.abs(n-i-this.selectedIndex);if(!this.isDragSelect&&o<e){t+=i}else if(!this.isDragSelect&&h<e){t-=i}if(t<0){this.x-=this.slideableWidth}else if(t>=i){this.x+=this.slideableWidth}};j.previous=function(t,i){this.select(this.selectedIndex-1,t,i)};j.next=function(t,i){this.select(this.selectedIndex+1,t,i)};j.updateSelectedSlide=function(){const t=this.slides[this.selectedIndex];if(!t){return}this.unselectSelectedSlide();this.selectedSlide=t;t.select();this.selectedCells=t.cells;this.selectedElements=t.getCellElements();this.selectedCell=t.cells[0];this.selectedElement=this.selectedElements[0]};j.unselectSelectedSlide=function(){if(this.selectedSlide){this.selectedSlide.unselect()}};j.selectInitialIndex=function(){const t=this.options.initialIndex;if(this.isInitActivated){this.select(this.selectedIndex,false,true);return}if(t&&typeof t=="string"){const i=this.queryCell(t);if(i){this.selectCell(t,false,true);return}}let i=0;if(t&&this.slides[t]){i=t}this.select(i,false,true)};j.selectCell=function(t,i,s){const n=this.queryCell(t);if(!n){return}const e=this.getCellSlideIndex(n);this.select(e,i,s)};j.getCellSlideIndex=function(t){for(let i=0;i<this.slides.length;i++){const s=this.slides[i];const n=s.cells.indexOf(t);if(n!=-1){return i}}};j.getCell=function(t){for(let i=0;i<this.cells.length;i++){const s=this.cells[i];if(s.element==t){return s}}};j.getCells=function(t){t=v.makeArray(t);const i=[];t.forEach((function(t){const s=this.getCell(t);if(s){i.push(s)}}),this);return i};j.getCellElements=function(){return this.cells.map((function(t){return t.element}))};j.getParentCell=function(t){const i=this.getCell(t);if(i){return i}t=v.getParent(t,".flickity-slider > *");return this.getCell(t)};j.getAdjacentCellElements=function(t,i){if(!t){return this.selectedSlide.getCellElements()}i=i===undefined?this.selectedIndex:i;const s=this.slides.length;if(1+t*2>=s){return this.getCellElements()}let n=[];for(let e=i-t;e<=i+t;e++){const t=this.options.wrapAround?v.modulo(e,s):e;const i=this.slides[t];if(i){n=n.concat(i.getCellElements())}}return n};j.queryCell=function(t){if(typeof t=="number"){return this.cells[t]}if(typeof t=="string"){if(t.match(/^[#\.]?[\d\/]/)){return}t=this.element.querySelector(t)}return this.getCell(t)};j.uiChange=function(){this.emitEvent("uiChange")};j.childUIPointerDown=function(t){if(t.type!="touchstart"){t.preventDefault()}this.focus()};j.onresize=function(){this.watchCSS();this.resize()};v.debounceMethod(O,"onresize",150);j.resize=function(){if(!this.isActive){return}this.getSize();if(this.options.wrapAround){this.x=v.modulo(this.x,this.slideableWidth)}this.positionCells();this._getWrapShiftCells();this.setGallerySize();this.emitEvent("resize");const t=this.selectedElements&&this.selectedElements[0];this.selectCell(t,false,true)};j.watchCSS=function(){const t=this.options.watchCSS;if(!t){return}const i=A(this.element,":after").content;if(i.indexOf("flickity")!=-1){this.activate()}else{this.deactivate()}};j.onkeydown=function(t){const i=document.activeElement&&document.activeElement!=this.element;if(!this.options.accessibility||i){return}const s=O.keyboardHandlers[t.keyCode];if(s){s.call(this)}};O.keyboardHandlers={37:function(){const t=this.options.rightToLeft?"next":"previous";this.uiChange();this[t]()},39:function(){const t=this.options.rightToLeft?"previous":"next";this.uiChange();this[t]()}};j.focus=function(){const t=window.pageYOffset;this.element.focus({preventScroll:true});if(window.pageYOffset!=t){window.scrollTo(window.pageXOffset,t)}};j.deactivate=function(){if(!this.isActive){return}this.element.classList.remove("flickity-enabled");this.element.classList.remove("flickity-rtl");this.unselectSelectedSlide();this.cells.forEach((function(t){t.destroy()}));this.element.removeChild(this.viewport);D(this.slider.children,this.element);if(this.options.accessibility){this.element.removeAttribute("tabIndex");this.element.removeEventListener("keydown",this)}this.isActive=false;this.emitEvent("deactivate")};j.destroy=function(){this.deactivate();window.removeEventListener("resize",this);this.allOff();this.emitEvent("destroy");delete this.element.flickityGUID;delete F[this.guid]};v.extend(j,E);O.data=function(t){t=v.getQueryElement(t);const i=t&&t.flickityGUID;return i&&F[i]};v.htmlInit(O,"flickity");O.Cell=z;O.Slide=C;
-/*!
- * Unipointer v2.4.0
- * base class for doing one thing with pointer event
- * MIT license
- */function I(){}function B(){}const W=B.prototype=Object.create(r.prototype);W.bindStartEvent=function(t){this._bindStartEvent(t,true)};W.unbindStartEvent=function(t){this._bindStartEvent(t,false)};W._bindStartEvent=function(t,i){i=i===undefined?true:i;const s=i?"addEventListener":"removeEventListener";let n="mousedown";if("ontouchstart"in window){n="touchstart"}else if(window.PointerEvent){n="pointerdown"}t[s](n,this)};W.handleEvent=function(t){const i="on"+t.type;if(this[i]){this[i](t)}};W.getTouch=function(t){for(let i=0;i<t.length;i++){const s=t[i];if(s.identifier==this.pointerIdentifier){return s}}};W.onmousedown=function(t){const i=t.button;if(i&&i!==0&&i!==1){return}this._pointerDown(t,t)};W.ontouchstart=function(t){this._pointerDown(t,t.changedTouches[0])};W.onpointerdown=function(t){this._pointerDown(t,t)};W._pointerDown=function(t,i){if(t.button||this.isPointerDown){return}this.isPointerDown=true;this.pointerIdentifier=i.pointerId!==undefined?i.pointerId:i.identifier;this.pointerDown(t,i)};W.pointerDown=function(t,i){this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,i])};const U={mousedown:["mousemove","mouseup"],touchstart:["touchmove","touchend","touchcancel"],pointerdown:["pointermove","pointerup","pointercancel"]};W._bindPostStartEvents=function(t){if(!t){return}const i=U[t.type];i.forEach((function(t){window.addEventListener(t,this)}),this);this._boundPointerEvents=i};W._unbindPostStartEvents=function(){if(!this._boundPointerEvents){return}this._boundPointerEvents.forEach((function(t){window.removeEventListener(t,this)}),this);delete this._boundPointerEvents};W.onmousemove=function(t){this._pointerMove(t,t)};W.onpointermove=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerMove(t,t)}};W.ontouchmove=function(t){const i=this.getTouch(t.changedTouches);if(i){this._pointerMove(t,i)}};W._pointerMove=function(t,i){this.pointerMove(t,i)};W.pointerMove=function(t,i){this.emitEvent("pointerMove",[t,i])};W.onmouseup=function(t){this._pointerUp(t,t)};W.onpointerup=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerUp(t,t)}};W.ontouchend=function(t){const i=this.getTouch(t.changedTouches);if(i){this._pointerUp(t,i)}};W._pointerUp=function(t,i){this._pointerDone();this.pointerUp(t,i)};W.pointerUp=function(t,i){this.emitEvent("pointerUp",[t,i])};W._pointerDone=function(){this._pointerReset();this._unbindPostStartEvents();this.pointerDone()};W._pointerReset=function(){this.isPointerDown=false;delete this.pointerIdentifier};W.pointerDone=I;W.onpointercancel=function(t){if(t.pointerId==this.pointerIdentifier){this._pointerCancel(t,t)}};W.ontouchcancel=function(t){const i=this.getTouch(t.changedTouches);if(i){this._pointerCancel(t,i)}};W._pointerCancel=function(t,i){this._pointerDone();this.pointerCancel(t,i)};W.pointerCancel=function(t,i){this.emitEvent("pointerCancel",[t,i])};B.getPointerPoint=function(t){return{x:t.pageX,y:t.pageY}};
-/*!
- * Unidragger v2.4.0
- * Draggable base class
- * MIT license
- */function q(){}const H=q.prototype=Object.create(B.prototype);H.bindHandles=function(){this._bindHandles(true)};H.unbindHandles=function(){this._bindHandles(false)};H._bindHandles=function(t){t=t===undefined?true:t;const i=t?"addEventListener":"removeEventListener";const s=t?this._touchActionValue:"";for(let n=0;n<this.handles.length;n++){const e=this.handles[n];this._bindStartEvent(e,t);e[i]("click",this);if(window.PointerEvent){e.style.touchAction=s}}};H._touchActionValue="none";H.pointerDown=function(t,i){const s=this.okayPointerDown(t);if(!s){return}this.pointerDownPointer={pageX:i.pageX,pageY:i.pageY};t.preventDefault();this.pointerDownBlur();this._bindPostStartEvents(t);this.emitEvent("pointerDown",[t,i])};const X={TEXTAREA:true,INPUT:true,SELECT:true,OPTION:true};const _={radio:true,checkbox:true,button:true,submit:true,image:true,file:true};H.okayPointerDown=function(t){const i=X[t.target.nodeName];const s=_[t.target.type];const n=!i||s;if(!n){this._pointerReset()}return n};H.pointerDownBlur=function(){const t=document.activeElement;const i=t&&t.blur&&t!=document.body;if(i){t.blur()}};H.pointerMove=function(t,i){const s=this._dragPointerMove(t,i);this.emitEvent("pointerMove",[t,i,s]);this._dragMove(t,i,s)};H._dragPointerMove=function(t,i){const s={x:i.pageX-this.pointerDownPointer.pageX,y:i.pageY-this.pointerDownPointer.pageY};if(!this.isDragging&&this.hasDragStarted(s)){this._dragStart(t,i)}return s};H.hasDragStarted=function(t){return Math.abs(t.x)>3||Math.abs(t.y)>3};H.pointerUp=function(t,i){this.emitEvent("pointerUp",[t,i]);this._dragPointerUp(t,i)};H._dragPointerUp=function(t,i){if(this.isDragging){this._dragEnd(t,i)}else{this._staticClick(t,i)}};H._dragStart=function(t,i){this.isDragging=true;this.isPreventingClicks=true;this.dragStart(t,i)};H.dragStart=function(t,i){this.emitEvent("dragStart",[t,i])};H._dragMove=function(t,i,s){if(!this.isDragging){return}this.dragMove(t,i,s)};H.dragMove=function(t,i,s){t.preventDefault();this.emitEvent("dragMove",[t,i,s])};H._dragEnd=function(t,i){this.isDragging=false;setTimeout(function(){delete this.isPreventingClicks}.bind(this));this.dragEnd(t,i)};H.dragEnd=function(t,i){this.emitEvent("dragEnd",[t,i])};H.onclick=function(t){if(this.isPreventingClicks){t.preventDefault()}};H._staticClick=function(t,i){if(this.isIgnoringMouseUp&&t.type=="mouseup"){return}this.staticClick(t,i);if(t.type!="mouseup"){this.isIgnoringMouseUp=true;setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)}};H.staticClick=function(t,i){this.emitEvent("staticClick",[t,i])};q.getPointerPoint=B.getPointerPoint;const Y=()=>{v.extend(O.defaults,{draggable:">1",dragThreshold:3});O.createMethods.push("_createDrag");const t=O.prototype;v.extend(t,q.prototype);t._touchActionValue="pan-y";const i="createTouch"in document;let s=false;t._createDrag=function(){this.on("activate",this.onActivateDrag);this.on("uiChange",this._uiChangeDrag);this.on("deactivate",this.onDeactivateDrag);this.on("cellChange",this.updateDraggable);if(i&&!s){window.addEventListener("touchmove",(function(){}));s=true}};t.onActivateDrag=function(){this.handles=[this.viewport];this.bindHandles();this.updateDraggable()};t.onDeactivateDrag=function(){this.unbindHandles();this.element.classList.remove("is-draggable")};t.updateDraggable=function(){if(this.options.draggable==">1"){this.isDraggable=this.slides.length>1}else{this.isDraggable=this.options.draggable}if(this.isDraggable){this.element.classList.add("is-draggable")}else{this.element.classList.remove("is-draggable")}};t.bindDrag=function(){this.options.draggable=true;this.updateDraggable()};t.unbindDrag=function(){this.options.draggable=false;this.updateDraggable()};t._uiChangeDrag=function(){delete this.isFreeScrolling};t.pointerDown=function(t,i){if(!this.isDraggable){this._pointerDownDefault(t,i);return}const s=this.okayPointerDown(t);if(!s){return}this._pointerDownPreventDefault(t);this.pointerDownFocus(t);if(document.activeElement!=this.element){this.pointerDownBlur()}this.dragX=this.x;this.viewport.classList.add("is-pointer-down");this.pointerDownScroll=e();window.addEventListener("scroll",this);this._pointerDownDefault(t,i)};t._pointerDownDefault=function(t,i){this.pointerDownPointer={pageX:i.pageX,pageY:i.pageY};this._bindPostStartEvents(t);this.dispatchEvent("pointerDown",t,[i])};const n={INPUT:true,TEXTAREA:true,SELECT:true};t.pointerDownFocus=function(t){const i=n[t.target.nodeName];if(!i){this.focus()}};t._pointerDownPreventDefault=function(t){const i=t.type=="touchstart";const s=t.pointerType=="touch";const e=n[t.target.nodeName];if(!i&&!s&&!e){t.preventDefault()}};t.hasDragStarted=function(t){return Math.abs(t.x)>this.options.dragThreshold};t.pointerUp=function(t,i){delete this.isTouchScrolling;this.viewport.classList.remove("is-pointer-down");this.dispatchEvent("pointerUp",t,[i]);this._dragPointerUp(t,i)};t.pointerDone=function(){window.removeEventListener("scroll",this);delete this.pointerDownScroll};t.dragStart=function(t,i){if(!this.isDraggable){return}this.dragStartPosition=this.x;this.startAnimation();window.removeEventListener("scroll",this);this.dispatchEvent("dragStart",t,[i])};t.pointerMove=function(t,i){const s=this._dragPointerMove(t,i);this.dispatchEvent("pointerMove",t,[i,s]);this._dragMove(t,i,s)};t.dragMove=function(t,i,s){if(!this.isDraggable){return}t.preventDefault();this.previousDragX=this.dragX;const n=this.options.rightToLeft?-1:1;if(this.options.wrapAround){s.x=s.x%this.slideableWidth}let e=this.dragStartPosition+s.x*n;if(!this.options.wrapAround&&this.slides.length){const t=Math.max(-this.slides[0].target,this.dragStartPosition);e=e>t?(e+t)*.5:e;const i=Math.min(-this.getLastSlide().target,this.dragStartPosition);e=e<i?(e+i)*.5:e}this.dragX=e;this.dragMoveTime=new Date;this.dispatchEvent("dragMove",t,[i,s])};t.dragEnd=function(t,i){if(!this.isDraggable){return}if(this.options.freeScroll){this.isFreeScrolling=true}let s=this.dragEndRestingSelect();if(this.options.freeScroll&&!this.options.wrapAround){const t=this.getRestingPosition();this.isFreeScrolling=-t>this.slides[0].target&&-t<this.getLastSlide().target}else if(!this.options.freeScroll&&s==this.selectedIndex){s+=this.dragEndBoostSelect()}delete this.previousDragX;this.isDragSelect=this.options.wrapAround;this.select(s);delete this.isDragSelect;this.dispatchEvent("dragEnd",t,[i])};t.dragEndRestingSelect=function(){const t=this.getRestingPosition();const i=Math.abs(this.getSlideDistance(-t,this.selectedIndex));const s=this._getClosestResting(t,i,1);const n=this._getClosestResting(t,i,-1);const e=s.distance<n.distance?s.index:n.index;return e};t._getClosestResting=function(t,i,s){let n=this.selectedIndex;let e=Infinity;const o=this.options.contain&&!this.options.wrapAround?function(t,i){return t<=i}:function(t,i){return t<i};while(o(i,e)){n+=s;e=i;i=this.getSlideDistance(-t,n);if(i===null){break}i=Math.abs(i)}return{distance:e,index:n-s}};t.getSlideDistance=function(t,i){const s=this.slides.length;const n=this.options.wrapAround&&s>1;const e=n?v.modulo(i,s):i;const o=this.slides[e];if(!o){return null}const h=n?this.slideableWidth*Math.floor(i/s):0;return t-(o.target+h)};t.dragEndBoostSelect=function(){if(this.previousDragX===undefined||!this.dragMoveTime||new Date-this.dragMoveTime>100){return 0}const t=this.getSlideDistance(-this.dragX,this.selectedIndex);const i=this.previousDragX-this.dragX;if(t>0&&i>0){return 1}else if(t<0&&i<0){return-1}return 0};t.staticClick=function(t,i){const s=this.getParentCell(t.target);const n=s&&s.element;const e=s&&this.cells.indexOf(s);this.dispatchEvent("staticClick",t,[i,n,e])};t.onscroll=function(){const t=e();const i=this.pointerDownScroll.x-t.x;const s=this.pointerDownScroll.y-t.y;if(Math.abs(i)>3||Math.abs(s)>3){this._pointerDone()}};function e(){return{x:window.scrollX,y:window.scrollY}}};const J=()=>{const t="http://www.w3.org/2000/svg";function i(t,i){this.direction=t;this.parent=i;this.parentElement=this.parent.element.shadowRoot||this.parent.element;this._create()}i.prototype=Object.create(B.prototype);i.prototype._create=function(){this.isEnabled=true;this.isPrevious=this.direction==-1;const t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;const i=this.element=document.createElement("button");i.className="flickity-button flickity-prev-next-button";i.part.add("navigation-button");if(this.isPrevious){i.classList.add("previous");i.part.add("navigation-button--previous")}else{i.classList.add("next");i.part.add("navigation-button--next")}i.setAttribute("type","button");this.disable();i.setAttribute("aria-label",this.isPrevious?"Previous":"Next");const s=document.createElement("slot");s.name=this.isPrevious?"previous-icon":"next-icon";i.appendChild(s);s.addEventListener("slotchange",(()=>{s.assignedElements({flatten:true}).forEach((t=>{t.removeAttribute("hidden")}))}));const n=this.createSVG();s.appendChild(n);this.parent.on("select",this.update.bind(this));this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};i.prototype.activate=function(){this.bindStartEvent(this.element);this.element.addEventListener("click",this);this.parentElement.appendChild(this.element)};i.prototype.deactivate=function(){this.parentElement.removeChild(this.element);this.unbindStartEvent(this.element);this.element.removeEventListener("click",this)};i.prototype.createSVG=function(){const i=document.createElementNS(t,"svg");i.setAttribute("class","flickity-button-icon");i.setAttribute("viewBox","0 0 100 100");i.part.add("navigation-icon");const n=document.createElementNS(t,"path");const e=s(this.parent.options.arrowShape);n.setAttribute("d",e);n.setAttribute("class","arrow");if(!this.isLeft){n.setAttribute("transform","translate(100, 100) rotate(180) ")}i.appendChild(n);return i};function s(t){if(typeof t=="string"){return t}return"M "+t.x0+",50"+" L "+t.x1+","+(t.y1+50)+" L "+t.x2+","+(t.y2+50)+" L "+t.x3+",50 "+" L "+t.x2+","+(50-t.y2)+" L "+t.x1+","+(50-t.y1)+" Z"}i.prototype.handleEvent=v.handleEvent;i.prototype.onclick=function(){if(!this.isEnabled){return}this.parent.uiChange();const t=this.isPrevious?"previous":"next";this.parent[t]()};i.prototype.enable=function(){if(this.isEnabled){return}this.element.disabled=false;this.isEnabled=true};i.prototype.disable=function(){if(!this.isEnabled){return}this.element.disabled=true;this.isEnabled=false};i.prototype.update=function(){const t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1){this.enable();return}const i=t.length?t.length-1:0;const s=this.isPrevious?0:i;const n=this.parent.selectedIndex==s?"disable":"enable";this[n]()};i.prototype.destroy=function(){this.deactivate();this.allOff()};v.extend(O.defaults,{prevNextButtons:true,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}});O.createMethods.push("_createPrevNextButtons");const n=O.prototype;n._createPrevNextButtons=function(){if(!this.options.prevNextButtons){return}this.prevButton=new i(-1,this);this.nextButton=new i(1,this);this.on("activate",this.activatePrevNextButtons)};n.activatePrevNextButtons=function(){this.prevButton.activate();this.nextButton.activate();this.on("deactivate",this.deactivatePrevNextButtons)};n.deactivatePrevNextButtons=function(){this.prevButton.deactivate();this.nextButton.deactivate();this.off("deactivate",this.deactivatePrevNextButtons)};O.PrevNextButton=i};const Z=()=>{function t(t){this.parent=t;this.state="stopped";this.onVisibilityChange=this.visibilityChange.bind(this);this.onVisibilityPlay=this.visibilityPlay.bind(this)}t.prototype=Object.create(r.prototype);t.prototype.play=function(){if(this.state=="playing"){return}const t=document.hidden;if(t){document.addEventListener("visibilitychange",this.onVisibilityPlay);return}this.state="playing";document.addEventListener("visibilitychange",this.onVisibilityChange);this.tick()};t.prototype.tick=function(){if(this.state!="playing"){return}let t=this.parent.options.autoPlay;t=typeof t=="number"?t:3e3;const i=this;this.clear();this.timeout=setTimeout((function(){i.parent.next(true);i.tick()}),t)};t.prototype.stop=function(){this.state="stopped";this.clear();document.removeEventListener("visibilitychange",this.onVisibilityChange)};t.prototype.clear=function(){clearTimeout(this.timeout)};t.prototype.pause=function(){if(this.state=="playing"){this.state="paused";this.clear()}};t.prototype.unpause=function(){if(this.state=="paused"){this.play()}};t.prototype.visibilityChange=function(){const t=document.hidden;this[t?"pause":"unpause"]()};t.prototype.visibilityPlay=function(){this.play();document.removeEventListener("visibilitychange",this.onVisibilityPlay)};v.extend(O.defaults,{pauseAutoPlayOnHover:true});O.createMethods.push("_createPlayer");const i=O.prototype;i._createPlayer=function(){this.player=new t(this);this.on("activate",this.activatePlayer);this.on("uiChange",this.stopPlayer);this.on("pointerDown",this.stopPlayer);this.on("deactivate",this.deactivatePlayer)};i.activatePlayer=function(){if(!this.options.autoPlay){return}this.player.play();this.element.addEventListener("mouseenter",this)};i.playPlayer=function(){this.player.play()};i.stopPlayer=function(){this.player.stop()};i.pausePlayer=function(){this.player.pause()};i.unpausePlayer=function(){this.player.unpause()};i.deactivatePlayer=function(){this.player.stop();this.element.removeEventListener("mouseenter",this)};i.onmouseenter=function(){if(!this.options.pauseAutoPlayOnHover){return}this.player.pause();this.element.addEventListener("mouseleave",this)};i.onmouseleave=function(){this.player.unpause();this.element.removeEventListener("mouseleave",this)};O.Player=t};const $=O;Y();J();Z();const G=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--dot-color:#ccc;--dot-color-active:var(--nano-color-primary, #007495);--navbtns-icon-color:var(--dot-color-active);--navbtns-bg-color:white;--navbtns-icon-color-disabled:var(--dot-color-active);--navbtns-bg-color-disabled:white;--fsbtn-icon-color:var(--dot-color-active);--fsbtn-bg-color:white;display:block;-webkit-user-select:none;user-select:none;overflow:hidden;transition:opacity 0.2s;opacity:0;max-inline-size:100vw}:host([ready]){opacity:1}.slideshow{max-block-size:100%;min-block-size:inherit;block-size:inherit;position:relative}.slideshow.not-ready{inline-size:100%;overflow:hidden}.flickity-container{opacity:0;transition:opacity 0.2s;display:flex;inline-size:fit-content;block-size:fit-content}.not-ready .flickity-container{inline-size:fit-content;block-size:fit-content}.flickity-container.slides-ready{min-block-size:inherit;max-block-size:inherit;block-size:inherit;inline-size:auto}[hidden]{display:none !important}.ui-extras{pointer-events:none;position:absolute;block-size:100%;inline-size:100%;inset-block-start:0;inset-inline-start:0}.ui-extras *{pointer-events:all}/*! Flickity v2.2.1\nhttps://flickity.metafizzy.co\n---------------------------------------------- */.flickity-enabled{position:relative;opacity:1}.flickity-enabled:focus{outline:none}.flickity-viewport{overflow:hidden;position:relative;min-block-size:100%;flex:1}.flickity-slider{position:absolute;inline-size:100%;block-size:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.flickity-button{position:absolute;background:var(--navbtns-bg-color);border:none;color:#333;opacity:0.75}.flickity-button:hover{opacity:1;cursor:pointer}.flickity-button:focus{outline:none;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:0.6}.flickity-button:disabled{opacity:0.3;cursor:auto;pointer-events:none;background:var(--navbtns-bg-color-disabled)}.flickity-button-icon{fill:var(--navbtns-icon-color)}.flickity-button:disabled .flickity-button-icon{fill:var(--navbtns-icon-color-disabled)}.flickity-prev-next-button{inset-block-start:50%;inline-size:44px;block-size:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{inset-inline-start:10px}.flickity-prev-next-button.next{inset-inline-end:10px}.flickity-rtl .flickity-prev-next-button.previous{inset-inline:auto 10px}.flickity-rtl .flickity-prev-next-button.next{inset-inline:10px auto}.flickity-prev-next-button .flickity-button-icon{position:absolute;inset-inline-start:20%;inset-block-start:20%;inline-size:60%;block-size:60%}.flickity-page-dots{position:absolute;inline-size:100%;inset-block-end:10px;padding:0;margin:0;list-style:none;text-align:center;line-height:1;z-index:4}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;inline-size:10px;block-size:10px;margin-block:0;margin-inline:8px;border-radius:50%;cursor:pointer;background:var(--dot-color)}.flickity-page-dots .dot.is-selected{opacity:1;background:var(--dot-color-active)}.flickity-enabled.is-fullscreen{position:fixed;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;background:hsla(0, 0%, 0%, 0.9);padding-block-end:35px;z-index:100}.flickity-enabled.is-fullscreen .flickity-page-dots{inset-block-end:45px}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;inset-inline-end:10px;inset-block-start:10px;inline-size:24px;block-size:24px;border-radius:4px;background:var(--fsbtn-bg-color);fill:var(--fsbtn-icon-color)}.flickity-rtl .flickity-fullscreen-button{inset-inline:10px auto}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;inline-size:16px;block-size:16px;inset-inline-start:4px;inset-block-start:4px}.flickity-enabled.is-fade .flickity-slider>*{pointer-events:none;z-index:0}.flickity-enabled.is-fade .flickity-slider ::slotted(.is-selected){pointer-events:auto;z-index:1}";const Q=G;const K=(t,i)=>(t%i+i)%i;const V=class{constructor(s){t(this,s);this.nanoSlidesDidLoad=i(this,"nanoSlidesDidLoad",7);this.nanoSlidesReady=i(this,"nanoSlidesReady",7);this.nanoSlidesSelect=i(this,"nanoSlidesSelect",7);this.nanoSlidesChange=i(this,"nanoSlidesChange",7);this.nanoSlidesScroll=i(this,"nanoSlidesScroll",7);this.nanoSlidesTransitionEnd=i(this,"nanoSlidesTransitionEnd",7);this.nanoSlidesDragStart=i(this,"nanoSlidesDragStart",7);this.nanoSlidesDragMove=i(this,"nanoSlidesDragMove",7);this.nanoSlidesDragEnd=i(this,"nanoSlidesDragEnd",7);this.nanoSlidesTap=i(this,"nanoSlidesTap",7);this.nanoSlidesFullscreenChange=i(this,"nanoSlidesFullscreenChange",7)}flickityEl;flickityReady=false;mutationO;resizeO;readyflickity;flickity=new Promise((t=>{this.readyflickity=t}));syncflickity;childrenEles;hasFullScreenModule=false;hasLazyLoadModule=false;hasDotsModule=false;hasFadeModule=false;iCurrentSlide;slidesReady;didInit=false;get host(){return s(this)}options={};async optionsChanged(){if(this.flickityReady){const t=await this.getflickity();const i=Object.assign(t.options,this.options);await this.loadFlickityModules(i);await this.update()}}navbtns=false;async navbtnsChanged(){Array.from(this._getRoot().querySelectorAll(".flickity-prev-next-button")).forEach((t=>{t.hidden=!this.navbtns}))}pager=false;async pagerChanged(){const t=this._getRoot().querySelector(".flickity-page-dots");if(t)t.hidden=!this.pager}fullscreenbtn=false;async fullscreenBtnChanged(){const t=this._getRoot().querySelector(".flickity-fullscreen-button");if(t)t.hidden=!this.fullscreenbtn}fullscreen=false;async fullscreenChanged(t,i){const s=await this.getflickity();if(this.fullscreen)s.viewFullscreen();else if(typeof i!=="undefined")s.exitFullscreen()}animation="scroll";async animationChange(t,i){const[s,n]=await Promise.all([this.getflickity(),tt(this.host)]);n.forEach((t=>{t.style["left"]=undefined}));if(i==="parallax"){s.off("scroll",this.parallax);n.forEach(((t,i)=>{if(this.childrenEles&&this.childrenEles[i])this.childrenEles[i].style["transform"]=undefined}));this.update()}if(typeof i==="function"){s.off("scroll",i)}if(typeof this.animation==="function"){this.options={fade:false,percentPosition:true};s.on("scroll",this.animation);return}switch(this.animation){case"fade":this.options={fade:true,percentPosition:true};break;case"parallax":this.options={fade:false,percentPosition:true};s.on("scroll",this.parallax);break;default:this.options={fade:false,percentPosition:true};break}}currentSlide=0;currentSlideChange(){if(this.currentSlide!==this.iCurrentSlide)this.slideTo(this.currentSlide)}internalSlideChange(){this.currentSlide=this.iCurrentSlide}autoplay=false;async autoPlayChange(){await this.stopAutoplay();if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)this.startAutoplay(this.autoplay)}}ready=false;nanoSlidesDidLoad;nanoSlidesReady;nanoSlidesSelect;nanoSlidesChange;nanoSlidesScroll;nanoSlidesTransitionEnd;nanoSlidesDragStart;nanoSlidesDragMove;nanoSlidesDragEnd;nanoSlidesTap;nanoSlidesFullscreenChange;async update(){const[t]=await Promise.all([this.getflickity(),tt(this.host)]);this.childrenEles=this.host.querySelectorAll(`${h("nano-slide")} > *`);t.reloadCells();t.resize();t.reposition()}async slideTo(t,i){const s=await this.getflickity();s.select(t,i)}async slideNext(t,i){const s=await this.getflickity();s.next(i,t)}async slidePrev(t,i){const s=await this.getflickity();s.previous(t,i)}async getActiveIndex(){const t=await this.getflickity();return t.selectedIndex}async length(){const t=await this.getflickity();return t.slides.length}async isEnd(){const t=await this.getflickity();return t.selectedIndex===t.slides.length-1}async isBeginning(){const t=await this.getflickity();return t.selectedIndex===0}async startAutoplay(t){const i=await this.getflickity();if(t)this.options={autoPlay:t};setTimeout((()=>i.playPlayer()))}async stopAutoplay(){const t=await this.getflickity();t.stopPlayer()}async lockSwipes(t){const i=await this.getflickity();i.options.draggable=!t;i.updateDraggable()}async getflickity(){return this.flickity}async reload(){this.destroyflickity();setTimeout((()=>this.initflickity()),20)}_getRoot(){return this.host.shadowRoot?this.host.shadowRoot:this.host}parallax=async()=>{const t=await this.flickity;const i=t.cells;i.forEach((i=>{const s=i.element.children[0];let n=t.x;if(t.options.wrapAround&&t.cells.length>1){n=K(n,t.slideableWidth);n=n-t.slideableWidth}let e=(i.target+n)*-1/3;if(i.shift<0){e=(i.target-t.slideableWidth+n)*-1/3}else if(i.shift>0){e=(i.target+(n+t.slideableWidth))*-1/3}s.style.transform="translate3d("+e+"px, 0, 0)";const o=e*3/i.size.width*100;i.element.style.setProperty("--animation-amount",o.toString())}))};handleFullscreen=t=>{this.fullscreen=t;this.nanoSlidesFullscreenChange.emit(t)};handleSlideSelect=t=>{this.iCurrentSlide=t;this.nanoSlidesSelect.emit(t)};destroyflickity(){const t=this.syncflickity;if(t!==undefined){t.destroy();this.flickity=new Promise((t=>{this.readyflickity=t}));this.flickityReady=false;this.syncflickity=undefined;this.ready=false}this.didInit=false}async loadFlickityModules(t){if(!this.hasFullScreenModule&&t.fullscreen){await import("./fullscreen-52d62028.js");this.hasFullScreenModule=true}if(!this.hasLazyLoadModule&&t.lazyLoad){await import("./lazyload-8ff69ba4.js");this.hasLazyLoadModule=true}if(!this.hasDotsModule&&t.pageDots){await import("./page-dots-5b23db8c.js");this.hasDotsModule=true}if(!this.hasFadeModule&&t.fade){await import("./fade-ce1a4958.js");this.hasFadeModule=true}}async initflickity(){const t=this.normalizeOptions();await this.loadFlickityModules(t);await tt(this.host);this.flickityEl=this.flickityEl||this._getRoot().querySelector(".flickity-container");if(!this.flickityEl)return;this.slidesReady=true;if(this.flickityEl.classList.contains("flickity-enabled")){this.destroyflickity()}this.flickityEl.style.height=this.flickityEl.getBoundingClientRect().height+"px";setTimeout((()=>{this.flickityEl.style.height="";const i=new $(this.flickityEl,t);this.flickityReady=true;this.syncflickity=i;this.animationChange();this.navbtnsChanged();this.pagerChanged();this.fullscreenChanged();this.fullscreenBtnChanged();this.readyflickity(i);this.ready=true;if(!window["ResizeObserver"])return;if(this.resizeO){this.resizeO.disconnect();this.resizeO=undefined}const s=this.resizeO=new ResizeObserver((()=>{n((()=>{const t=this.host.shadowRoot.querySelector(".flickity-viewport");e((()=>{if(t)t.style.height="";i.resize()}))}))}));s.observe(this.host)}),100)}normalizeOptions(){const t={cellSelector:h("nano-slide"),contain:true,prevNextButtons:true,fullscreen:this.fullscreen,accessibility:true,imagesLoaded:true,pageDots:this.pager};if(this.animation==="fade"){t.fade=true}if(this.currentSlide>0){t.initialIndex=this.currentSlide}if(this.autoplay){if(typeof this.autoplay==="string")this.autoplay=parseInt(this.autoplay);if(this.autoplay>0)t.autoPlay=this.autoplay}const i={ready:()=>{setTimeout((()=>{this.nanoSlidesReady.emit()}),20)},select:this.handleSlideSelect,change:this.nanoSlidesChange.emit,scroll:this.nanoSlidesScroll.emit,settle:()=>requestAnimationFrame((()=>this.nanoSlidesTransitionEnd.emit())),dragStart:()=>requestAnimationFrame((()=>this.nanoSlidesDragStart.emit())),dragMove:()=>requestAnimationFrame((()=>this.nanoSlidesDragMove.emit())),dragEnd:()=>requestAnimationFrame((()=>this.nanoSlidesDragEnd.emit())),staticClick:this.nanoSlidesTap.emit,fullscreenChange:this.handleFullscreen};const s=!!this.options&&!!this.options.on?this.options.on:{};const n={on:{...s,...i}};return{...t,...n,...this.options}}componentDidLoad(){if(typeof window!=="undefined"&&window.MutationObserver){const t=this.mutationO=new MutationObserver((t=>{if(t[0].addedNodes[0]&&t[0].addedNodes[0].nodeName.toLowerCase()===h("nano-slide")&&this.flickityReady){this.update()}}));t.observe(this.host,{childList:true,subtree:true})}}componentWillLoad(){this.nanoSlidesDidLoad.emit();if(!this.didInit){this.didInit=true;this.initflickity()}}disconnectedCallback(){if(this.mutationO){this.mutationO.disconnect();this.mutationO=undefined}if(this.resizeO){this.resizeO.disconnect();this.resizeO=undefined}this.destroyflickity()}render(){return c(o,{key:"fec3c2951cb3865b5a90817750783f60791c8152",class:"nano-slides"},c("div",{key:"6e7da38e24396ff8f274ecf1f12523561f68d7b9",class:{slideshow:true,ready:this.ready,"not-ready":!this.ready},part:"base"},c("div",{key:"4a80ee977b2c6adab8667be4d5737ee2b3991c12",ref:t=>this.flickityEl=t,class:{"flickity-container":true,"slides-ready":this.slidesReady,"slides-not-ready":!this.slidesReady},part:"slide-container"},c("slot",{key:"34ff051519aeba458f99ea0d164a0acd1bd547cc"})),c("div",{key:"91192bf437b0c614a7f349f4ae7c0740f6768ea7",class:"ui-extras"},c("slot",{key:"e278a3193b7b9c4b88f6245cc63def6f2f4dd941",name:"ui"}))))}static get watchers(){return{options:["optionsChanged"],navbtns:["navbtnsChanged"],pager:["pagerChanged"],fullscreenbtn:["fullscreenBtnChanged"],fullscreen:["fullscreenChanged"],animation:["animationChange"],currentSlide:["currentSlideChange"],iCurrentSlide:["internalSlideChange"],autoplay:["autoPlayChange"]}}};const tt=t=>{const i=Array.from(t.querySelectorAll(h("nano-slide")));let s=i.filter((t=>!t.ready));if(!s.length)return Promise.resolve(i);return new Promise((n=>{const e=o=>{s=s.filter((t=>t!==o.target));if(!s.length){n(i);t.removeEventListener("nanoSlideReady",e);t.removeEventListener("nano-slide-ready",e)}};t.addEventListener("nanoSlideReady",e);t.addEventListener("nano-slide-ready",e)}))};V.style=Q;export{O as F,V as S,B as U,v as u};
-//# sourceMappingURL=nano-slides-2715825b.js.map