@nanoporetech-digital/components 7.6.0 → 7.7.0

package/dist/nano-components/nano-date-picker.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{h as e,r as t,c as a,g as s,a as i}from"./index-3118109b.js";import{i as o,g as n,b as d,D as c,p as l,d as r,s as h,e as u,f as b,h as f,j as _,k as p,l as y,a as v}from"./date-utils-1e39c114.js";import{f as g}from"./focus-visible-e5f02c46.js";import{c as m}from"./theme-d553c17a.js";const k={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const x=k;const D=({focusedDay:t,today:a,day:s,onDaySelect:i,onKeyboardNavigation:n,focusedDayRef:d,inRange:c,disabled:l,isSelected:r})=>{const h=o(s,a);const u=o(s,t);const b=s.getMonth()!==t.getMonth()||l;const f=!c;function _(e){i(e,s)}return e("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:_,onKeyDown:n,disabled:f,type:"button","aria-pressed":r?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},e("span",{"aria-hidden":"true"},s.getDate()),e("span",{class:"duet-date__vhidden"},s.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function z(e,t,a){return e.map(((s,i)=>{const o=(i+t)%e.length;return a(e[o])}))}const S=({selectedDate:t,focusedDate:a,labelledById:s,localization:i,firstDayOfWeek:c,min:l,max:r,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:f,onFocusIn:_,isDateDisabled:p})=>{const y=new Date;const v=n(a,c);return e("table",{class:"duet-date__table",role:"grid","aria-labelledby":s,onFocusin:_,onMouseDown:f},e("thead",null,e("tr",null,z(i.dayNames,c,(t=>e("th",{class:"duet-date__table-header",scope:"col"},e("span",{"aria-hidden":"true"},t.substr(0,2)),e("span",{class:"duet-date__vhidden"},t)))))),e("tbody",null,w(v,7).map((s=>e("tr",{class:"duet-date__row"},s.map((s=>e("td",{class:"duet-date__cell",role:"gridcell","aria-selected":o(s,t)?"true":undefined},e(D,{day:s,today:y,focusedDay:a,inRange:d(s,l,r),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:p(s),isSelected:o(s,t)})))))))))};const M=':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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const F=M;function N(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let T=0;const C=class{constructor(e){t(this,e);this.nanoDatePicked=a(this,"nanoDatePicked",7)}dateId=`nano-datepicker-${T++}`;monthSelectId=this.dateId+"-"+"month";yearSelectId=this.dateId+"-"+"year";dialogLabelId=this.dateId+"-"+"dialog";firstFocusableElement;monthSelectNode;yearSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return s(this)}activeFocus=false;focusedDay=new Date;selectedDate="";min="";max="";firstDayOfWeek=c.Monday;localization=x;color;isDateDisabled=()=>false;isModal=false;firstFocusEle;nanoDatePicked;async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}enableActiveFocus=()=>{this.activeFocus=true};disableActiveFocus=()=>{this.activeFocus=false};addDays(e){this.setFocusedDay(r(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(f(this.focusedDay),e);const a=_(t);const s=b(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setYear(e){const t=y(f(this.focusedDay),e);const a=_(t);const s=y(this.focusedDay,e);this.setFocusedDay(p(s,t,a))}setFocusedDay(e){this.focusedDay=p(e,l(this.min),l(this.max))}handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};handleTouchMove=e=>{e.preventDefault()};handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const o=Math.abs(a)>=i&&Math.abs(s)<=i;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const t=l(this.selectedDate);const a=(t||this.focusedDay).getFullYear();const s=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=l(this.min);const c=l(this.max);const r=n!=null&&n.getMonth()===s&&n.getFullYear()===o;const h=c!=null&&c.getMonth()===s&&c.getFullYear()===o;let u=a-10;let b=a+10;if(n)u=n.getFullYear();if(c)b=c.getFullYear();return e(i,{key:"ce15b442e826c9b4857e6edb38f60ef3afe61a92",class:{...m(this.color)}},e("div",{key:"fc05eab7b0885719f65c38d6f75575f69e76386c",class:"duet-date"},e("div",{key:"6caac24cff8adc3b2099f92b3cba63cfb08a279c",class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},e("div",{key:"16ac7a9237e872b16fcf6a119f7d9d33cceb6db4",class:"duet-date__dialog-content"},e("div",{key:"2dc8671bf3bfd1142afc07dee3a3c1938c5fb2ef",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),e("div",{key:"0ab06f5c903d2d2a1b89591ae619e86e698af904",class:"duet-date__header",onFocusin:this.disableActiveFocus},e("div",{key:"23f53dc59c17789d0536329dd89e01dd05e33a5c"},e("h2",{key:"59ff3f0f4a004c232f47741fc47d3ced11b1ed0e",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),e("label",{key:"8bd9d43f70b162b0e0c18fb2c80aef74fd0538b3",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),e("div",{key:"050f1b788e135a5d039b9ef8bb9f3c7c3fb26ef1",class:"duet-date__select"},e("select",{key:"4917c18110da5dfa9732c93b92bc21d52d31d8b9",id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((t,a)=>e("option",{key:t,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?f(n):null,c?_(c):null)},t)))),e("div",{key:"0d4ae83734c601e1b7e7aab05dc338e2143d006e",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"8b63a0b43277f4ae8a47296c7900532a470038f2"},this.localization.monthNamesShort[s]),e("nano-icon",{key:"03a87211ceeb5ed341f30d1ca4280e45c523f23e",name:"light/chevron-down"}))),e("label",{key:"6e3558a5eca3ff22cd34386835026b60e84a5f62",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),e("div",{key:"7b26df791b9b0d8569bb46dae82ae8dff565f007",class:"duet-date__select"},e("select",{key:"0fe15c9f98f95e3002fbd3e20a08c08493dfb8fc",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},N(u,b).map((t=>e("option",{key:t,selected:t===o},t)))),e("div",{key:"18c4d1461db645b541d713859b804cf572543b10",class:"duet-date__select-label","aria-hidden":"true"},e("span",{key:"a1ab8275aa3f042ae63b7e3deb156a4ca4164bf0"},this.focusedDay.getFullYear()),e("nano-icon",{key:"cbf1cbd255287c03c1488b03a354846bf5d21f51",name:"light/chevron-down"})))),e("div",{key:"6a5220e5cd0f8c38f613e4211463e2adafb81d57",class:"duet-date__nav"},e("button",{key:"59f20fa24939df05a746fab1e0f122656a8f22a3",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},e("nano-icon",{key:"0dc03af75cc61f12d15c2b33cc176f1d7c9f7428",name:"light/chevron-left"}),e("span",{key:"041f653c9c9c6ddda1bfbf9ca713f1fb978ab387",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),e("button",{key:"0e5e15bf3648612c8df0d25c8d2eb8a66c2acba1",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},e("nano-icon",{key:"b7be1f142a318fbca29bbaa99f8926f5a4af789f",name:"light/chevron-right"}),e("span",{key:"f96c71e9a92ee19c90ac6c244220c0ae1e0769e3",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),e("div",{key:"82c4e92386f93a765db8504d374529c06e321898"},e(S,{key:"6cebbdb7ac3024bac0c01fd75098b23eb3ee1696",selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:c,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};C.style=F;export{C as nano_date_picker};
+import{r as e,c as t,g as a,a as s}from"./index-6cc72cd9.js";import{h as i}from"./renderer-4bc3e2dc.js";import{i as o,g as n,b as d,D as c,p as l,d as r,s as h,e as u,f as b,h as f,j as p,k as _,l as y,a as v}from"./date-utils-1e39c114.js";import{f as g}from"./focus-visible-e5f02c46.js";import{c as m}from"./theme-d553c17a.js";const k={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};const x=k;const D=({focusedDay:e,today:t,day:a,onDaySelect:s,onKeyboardNavigation:n,focusedDayRef:d,inRange:c,disabled:l,isSelected:r})=>{const h=o(a,t);const u=o(a,e);const b=a.getMonth()!==e.getMonth()||l;const f=!c;function p(e){s(e,a)}return i("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":b,"is-today":h},tabIndex:u?0:-1,onClick:p,onKeyDown:n,disabled:f,type:"button","aria-pressed":r?"true":"false",ref:e=>{if(u&&e&&d){d(e)}}},i("span",{"aria-hidden":"true"},a.getDate()),i("span",{class:"duet-date__vhidden"},a.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function w(e,t){const a=[];for(let s=0;s<e.length;s+=t){a.push(e.slice(s,s+t))}return a}function z(e,t,a){return e.map(((s,i)=>{const o=(i+t)%e.length;return a(e[o])}))}const S=({selectedDate:e,focusedDate:t,labelledById:a,localization:s,firstDayOfWeek:c,min:l,max:r,onDateSelect:h,onKeyboardNavigation:u,focusedDayRef:b,onMouseDown:f,onFocusIn:p,isDateDisabled:_})=>{const y=new Date;const v=n(t,c);return i("table",{class:"duet-date__table",role:"grid","aria-labelledby":a,onFocusin:p,onMouseDown:f},i("thead",null,i("tr",null,z(s.dayNames,c,(e=>i("th",{class:"duet-date__table-header",scope:"col"},i("span",{"aria-hidden":"true"},e.substr(0,2)),i("span",{class:"duet-date__vhidden"},e)))))),i("tbody",null,w(v,7).map((a=>i("tr",{class:"duet-date__row"},a.map((a=>i("td",{class:"duet-date__cell",role:"gridcell","aria-selected":o(a,e)?"true":undefined},i(D,{day:a,today:y,focusedDay:t,inRange:d(a,l,r),onDaySelect:h,onKeyboardNavigation:u,focusedDayRef:b,disabled:_(a),isSelected:o(a,e)})))))))))};const M=':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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}';const F=M;function N(e,t){const a=[];for(let s=e;s<=t;s++){a.push(s)}return a}let T=0;const C=class{constructor(a){e(this,a);this.nanoDatePicked=t(this,"nanoDatePicked",7)}dateId=`nano-datepicker-${T++}`;monthSelectId=this.dateId+"-"+"month";yearSelectId=this.dateId+"-"+"year";dialogLabelId=this.dateId+"-"+"dialog";firstFocusableElement;monthSelectNode;yearSelectNode;focusedDayNode;focusTimeoutId;initialTouchX=null;initialTouchY=null;get host(){return a(this)}activeFocus=false;focusedDay=new Date;selectedDate="";min="";max="";firstDayOfWeek=c.Monday;localization=x;color;isDateDisabled=()=>false;isModal=false;firstFocusEle;nanoDatePicked;async setFocus(e=false,t=false){this.setFocusedDay(l(this.selectedDate)||new Date);if(e){setTimeout((e=>this.focusedDayNode.focus()),20);return}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((()=>{if(t)g.force(this.monthSelectNode);this.monthSelectNode.focus()}),20)}handleSelectedDateChange(){this.setFocus(true)}enableActiveFocus=()=>{this.activeFocus=true};disableActiveFocus=()=>{this.activeFocus=false};addDays(e){this.setFocusedDay(r(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(h(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=b(f(this.focusedDay),e);const a=p(t);const s=b(this.focusedDay,e);this.setFocusedDay(_(s,t,a))}setYear(e){const t=y(f(this.focusedDay),e);const a=p(t);const s=y(this.focusedDay,e);this.setFocusedDay(_(s,t,a))}setFocusedDay(e){this.focusedDay=_(e,l(this.min),l(this.max))}handleTouchStart=e=>{const t=e.changedTouches[0];this.initialTouchX=t.pageX;this.initialTouchY=t.pageY};handleTouchMove=e=>{e.preventDefault()};handleTouchEnd=e=>{const t=e.changedTouches[0];const a=t.pageX-this.initialTouchX;const s=t.pageY-this.initialTouchY;const i=70;const o=Math.abs(a)>=i&&Math.abs(s)<=i;if(o){this.addMonths(a<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};handleNextMonthClick=e=>{e.preventDefault();this.addMonths(1)};handlePreviousMonthClick=e=>{e.preventDefault();this.addMonths(-1)};handleKeyboardNavigation=e=>{if(e.key==="Tab"&&!e.shiftKey&&this.isModal){e.preventDefault();const t=this.firstFocusEle||this.firstFocusableElement;t.focus();return}let t=true;switch(e.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":if(e.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case"PageDown":if(e.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:t=false}if(t){e.preventDefault();this.enableActiveFocus()}};handleDaySelect=(e,t)=>{const a=!this.isDateDisabled(t);const s=d(t,l(this.min),l(this.max));if(!s||!a){return}if(t.getMonth()===this.focusedDay.getMonth()){this.setValue(t)}else{this.setFocusedDay(t)}};handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))};handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))};setValue(e){this.selectedDate=v(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})}processFocusedDayNode=e=>{this.focusedDayNode=e;if(this.activeFocus){setTimeout((()=>e.focus()),0)}};connectedCallback(){if(this.yearSelectNode)g.observe(this.yearSelectNode);if(this.monthSelectNode)g.observe(this.monthSelectNode)}componentWillLoad(){this.handleSelectedDateChange()}componentDidLoad(){this.connectedCallback()}disconnectedCallback(){g.unobserve(this.yearSelectNode);g.unobserve(this.monthSelectNode)}render(){const e=l(this.selectedDate);const t=(e||this.focusedDay).getFullYear();const a=this.focusedDay.getMonth();const o=this.focusedDay.getFullYear();const n=l(this.min);const c=l(this.max);const r=n!=null&&n.getMonth()===a&&n.getFullYear()===o;const h=c!=null&&c.getMonth()===a&&c.getFullYear()===o;let u=t-10;let b=t+10;if(n)u=n.getFullYear();if(c)b=c.getFullYear();return i(s,{key:"126b01f14158329419fb42f1e54a02ce4cfb965c",class:{...m(this.color),"nano-date-picker":true}},i("div",{key:"b1122b2aff25ff4f0f584fb8ba180d7b606e3826",class:"duet-date"},i("div",{key:"6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f",class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},i("div",{key:"d0187c54b6c9ef0de0939f3fc722ffe721b862d8",class:"duet-date__dialog-content"},i("div",{key:"ee76a378ad52d1ac71258efc15c8723153c6c58e",class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),i("div",{key:"a2a2a170ccf1a6ad341086fcd7443aa2626c8591",class:"duet-date__header",onFocusin:this.disableActiveFocus},i("div",{key:"ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b"},i("h2",{key:"70c4c43daf51201a0e2a568005a79f328230d324",id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[a]," ",this.focusedDay.getFullYear()),i("label",{key:"8250e3839dfb6c35f9787aff667b2d141de5fdcd",htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),i("div",{key:"d4a05e88e2df283665c016554c4adce5d26b44ef",class:"duet-date__select"},i("select",{key:"69363c3bd0f0ccb700acc5e07d58b21626c8c567",id:this.monthSelectId,class:"duet-date__select--month",ref:e=>this.firstFocusableElement=this.monthSelectNode=e,onChange:this.handleMonthSelect},this.localization.monthNames.map(((e,t)=>i("option",{key:e,value:t,selected:t===a,disabled:!d(new Date(o,t,1),n?f(n):null,c?p(c):null)},e)))),i("div",{key:"bda454d4475eec3fe5ae9acc5c8469ecb3d18c05",class:"duet-date__select-label","aria-hidden":"true"},i("span",{key:"d19ab3a704087c802120ccc3302936c731b7562e"},this.localization.monthNamesShort[a]),i("nano-icon",{key:"43a416a07564d92b336f24949e996883bf58d5ee",name:"light/chevron-down"}))),i("label",{key:"70377923f51c50f90e60f67176ff78a33d374ee0",htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),i("div",{key:"7bf07568e4a9cf4d8be23d4fc3524387a084c2fd",class:"duet-date__select"},i("select",{key:"d93e973816afe3104eb3e758d528710dcb75eaf5",id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect,ref:e=>this.yearSelectNode=e},N(u,b).map((e=>i("option",{key:e,selected:e===o},e)))),i("div",{key:"a702ec49fb3fae14fc45675cfeadf53ebb640d23",class:"duet-date__select-label","aria-hidden":"true"},i("span",{key:"245198b80ab131426457daa425f3bb29178bd5cd"},this.focusedDay.getFullYear()),i("nano-icon",{key:"61346903f0755ced93ae4298fbf69c5045411c3d",name:"light/chevron-down"})))),i("div",{key:"58fa6c63619b08701a33b8690c6581d5109aeb48",class:"duet-date__nav"},i("button",{key:"c1428835b394a76fc15e7f627b0f1cf223a860d8",class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:r,type:"button"},i("nano-icon",{key:"59a1bfa486467fd186afe8484cb6d36f6361ca31",name:"light/chevron-left"}),i("span",{key:"79b059d58381e91fe5fb3eab5f6c0e4e1f76a481",class:"duet-date__vhidden"},this.localization.prevMonthLabel)),i("button",{key:"9e3bf89c8ba8660985810339f2a26972b8669c9c",class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:h,type:"button"},i("nano-icon",{key:"93ebf9ceb09fd374f99a4b1081d3a604a366c951",name:"light/chevron-right"}),i("span",{key:"f9bab89b3c09bc9e53ea4d455881a4e9db64b222",class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),i("div",{key:"b0a97a8d3aca05ef9db1a69602779e34ccee7bbe"},i(S,{key:"e2dd247425720b2032e9e7a0a951a936d87dd560",selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:c,isDateDisabled:this.isDateDisabled}))))))}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};C.style=F;export{C as nano_date_picker};
 //# sourceMappingURL=nano-date-picker.entry.js.map

package/dist/nano-components/nano-date-picker.entry.js.map

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

package/dist/nano-components/nano-details.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as o,B as r,h as i}from"./index-3118109b.js";import{d as s}from"./transitions-c09bd7f6.js";const a=":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{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const n=a;const d=class{constructor(o){t(this,o);this.nanoOpened=e(this,"nanoOpened",7);this.nanoClosed=e(this,"nanoClosed",7);this.nanoAfterOpened=e(this,"nanoAfterOpened",7);this.nanoAfterClosed=e(this,"nanoAfterClosed",7)}hasStartSlot;hasEndSlot;mo;stateChanging=false;bodyEl;detailsEl;headerEl;contentEl;cacheHeight;get host(){return o(this)}label="";open=false;disabled=false;noHandle=false;iconRotation=90;useCacheHeight=false;nanoOpened;nanoClosed;nanoAfterOpened;nanoAfterClosed;toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}onKeyDown=t=>{if(this.stateChanging||this.disabled)return;switch(t.key){case"Enter":case" ":t.preventDefault();this.open=!this.open;break;case"ArrowUp":t.preventDefault();this.open=false;break;case"ArrowDown":t.preventDefault();this.open=true;break}};onMouseDown=t=>{t.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};hide(){const t=this.nanoClosed.emit(this.open);if(t.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));setTimeout((()=>{this.bodyEl.style.height="0px"}))}show(){const t=this.nanoOpened.emit();this.detailsEl.open=true;if(t.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!r.isBrowser)return;this.mo=new MutationObserver((t=>{if(this.stateChanging)return;for(const e of t){if(e.type==="attributes"&&e.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return i("details",{key:"d029baacc6b25b275585fd110244292df8565113",part:"base",ref:t=>this.detailsEl=t,class:{details:true,open:this.open,disabled:this.disabled}},i("summary",{key:"b89dd13ee05417c6e6d10d74b0657908d0219032",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:t=>this.headerEl=t,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{key:"4f61a025fb297cb9211c7b2c34658b6cd696a12d",part:"label",class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{key:"c1febecba9cfe36955454d98e7b29449c7cf0324",part:"body",class:"body",ref:t=>this.bodyEl=t,tabindex:"-1",role:"region","aria-labelledby":"header"},i("div",{key:"3fbfde1832791ad82d1992671f7abb7506e88d6c",part:"content",ref:t=>this.contentEl=t,class:"content",id:"content"},i("slot",{key:"1f21df1c212294735004d2e34abc19c554b617a1"}))))}static get watchers(){return{open:["toggleClick"]}}};d.style=n;export{d as nano_details};
+import{r as e,c as t,g as r,B as o,a as i}from"./index-6cc72cd9.js";import{d as s}from"./transitions-c09bd7f6.js";import{h as a}from"./renderer-4bc3e2dc.js";const n=":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{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";const d=n;const h=class{constructor(r){e(this,r);this.nanoOpened=t(this,"nanoOpened",7);this.nanoClosed=t(this,"nanoClosed",7);this.nanoAfterOpened=t(this,"nanoAfterOpened",7);this.nanoAfterClosed=t(this,"nanoAfterClosed",7)}hasStartSlot;hasEndSlot;mo;stateChanging=false;bodyEl;detailsEl;headerEl;contentEl;cacheHeight;get host(){return r(this)}label="";open=false;disabled=false;noHandle=false;iconRotation=90;useCacheHeight=false;nanoOpened;nanoClosed;nanoAfterOpened;nanoAfterClosed;toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}onKeyDown=e=>{if(this.stateChanging||this.disabled)return;switch(e.key){case"Enter":case" ":e.preventDefault();this.open=!this.open;break;case"ArrowUp":e.preventDefault();this.open=false;break;case"ArrowDown":e.preventDefault();this.open=true;break}};onMouseDown=e=>{e.preventDefault();this.headerEl.focus();if(this.stateChanging||this.disabled)return;this.open=!this.open};hide(){const e=this.nanoClosed.emit(this.open);if(e.defaultPrevented){this.open=true;this.detailsEl.open=true;return}this.cacheHeight=this.contentEl.scrollHeight;this.bodyEl.style.height=this.cacheHeight+"px";s(this.bodyEl,{className:"is-shown",show:false,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.detailsEl.open=false;this.bodyEl.classList.add("is-hidden");this.nanoAfterClosed.emit()}));setTimeout((()=>{this.bodyEl.style.height="0px"}))}show(){const e=this.nanoOpened.emit();this.detailsEl.open=true;if(e.defaultPrevented){this.open=false;this.detailsEl.open=false;return}s(this.bodyEl,{className:"is-shown",show:true,transitionProp:["height"]}).then((()=>{this.stateChanging=false;this.bodyEl.style.height="auto";this.nanoAfterOpened.emit()}));this.bodyEl.style.height=(this.useCacheHeight&&this.cacheHeight?this.cacheHeight:this.contentEl.scrollHeight)+"px"}attachMo(){if(this.mo||!this.detailsEl||!o.isBrowser)return;this.mo=new MutationObserver((e=>{if(this.stateChanging)return;for(const t of e){if(t.type==="attributes"&&t.attributeName==="open"){this.open=this.detailsEl.open}}}));this.mo.observe(this.detailsEl,{attributes:true})}componentWillLoad(){this.hasStartSlot=!!this.host.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.host.querySelector('[slot="icon-end"]')}componentDidLoad(){this.bodyEl.style.height=this.open?"auto":"0";if(this.open)this.detailsEl.setAttribute("open","true");this.attachMo()}connectedCallback(){this.attachMo()}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}}render(){return a(i,{key:"ee6fb3abfaf15e07a18d399514e8447d63512ce4",class:"nano-details"},a("details",{key:"9478907ce6d6e8363c66df27e45e05a22705d38c",part:"base",ref:e=>this.detailsEl=e,class:{details:true,open:this.open,disabled:this.disabled}},a("summary",{key:"717ed7a624692dfce885436025e45cd011d9af5a",part:"header","aria-controls":"content","aria-expanded":this.open?"true":"false","aria-disabled":this.disabled?"true":"false",tabindex:this.disabled?"-1":"0",style:{display:this.noHandle?"none":""},id:"header",role:"button",class:"header",ref:e=>this.headerEl=e,onKeyDown:this.onKeyDown,onClick:this.onMouseDown},this.hasStartSlot?a("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},a("slot",{name:"icon-start"})):"",a("div",{key:"9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad",part:"label",class:"label"},this.label?this.label:a("slot",{name:"label"})),this.hasEndSlot?a("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},a("slot",{name:"icon-end"})):""),a("div",{key:"89311fc1194ca178843b5b751c48740b26689eaa",part:"body",class:"body",ref:e=>this.bodyEl=e,tabindex:"-1",role:"region","aria-labelledby":"header"},a("div",{key:"b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61",part:"content",ref:e=>this.contentEl=e,class:"content",id:"content"},a("slot",{key:"4735f3166e91d58152564a4f1b423e77900fd84f"})))))}static get watchers(){return{open:["toggleClick"]}}};h.style=d;export{h as nano_details};
 //# sourceMappingURL=nano-details.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["detailsCss","NanoDetailsStyle0","Details","hasStartSlot","hasEndSlot","mo","stateChanging","bodyEl","detailsEl","headerEl","contentEl","cacheHeight","label","open","disabled","noHandle","iconRotation","useCacheHeight","nanoOpened","nanoClosed","nanoAfterOpened","nanoAfterClosed","toggleClick","this","show","hide","onKeyDown","e","key","preventDefault","onMouseDown","focus","nanoClose","emit","defaultPrevented","scrollHeight","style","height","displayTransition","className","transitionProp","then","classList","add","setTimeout","nanoOpen","attachMo","Build","isBrowser","MutationObserver","changes","change","type","attributeName","observe","attributes","componentWillLoad","host","querySelector","componentDidLoad","setAttribute","connectedCallback","disconnectedCallback","disconnect","undefined","render","h","part","ref","d","class","details","tabindex","display","id","role","s","onClick","transform","name","div"],"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.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 --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{tokens.$control-focus-style}\n  */\n\n  @include mx.text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --content-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --transition-duration: 0.2s;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{tokens.$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  block-size: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    inline-size: 100%;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Build,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n  private cacheHeight: number;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + 'px';\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\n    });\n\n    // requestAnimationFrame doesn't trigger transitionend event for firefox :/\n    setTimeout(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + 'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <details\n        part=\"base\"\n        ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n        class={{\n          details: true,\n          open: this.open,\n          disabled: this.disabled,\n        }}\n      >\n        <summary\n          part=\"header\"\n          aria-controls=\"content\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? '-1' : '0'}\n          style={{ display: this.noHandle ? 'none' : '' }}\n          id=\"header\"\n          role=\"button\"\n          class=\"header\"\n          ref={(s) => (this.headerEl = s)}\n          onKeyDown={this.onKeyDown}\n          onClick={this.onMouseDown}\n        >\n          {this.hasStartSlot ? (\n            <span\n              part=\"icon--start\"\n              class=\"icon icon--start\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-start\" />\n            </span>\n          ) : (\n            ''\n          )}\n          <div part=\"label\" class=\"label\">\n            {this.label ? this.label : <slot name=\"label\" />}\n          </div>\n          {this.hasEndSlot ? (\n            <span\n              part=\"icon--end\"\n              class=\"icon icon--end\"\n              style={{\n                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n              }}\n            >\n              <slot name=\"icon-end\" />\n            </span>\n          ) : (\n            ''\n          )}\n        </summary>\n        <div\n          part=\"body\"\n          class=\"body\"\n          ref={(div) => (this.bodyEl = div)}\n          tabindex=\"-1\"\n          role=\"region\"\n          aria-labelledby=\"header\"\n        >\n          <div\n            part=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            class=\"content\"\n            id=\"content\"\n          >\n            <slot />\n          </div>\n        </div>\n      </details>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["detailsCss","NanoDetailsStyle0","Details","hasStartSlot","hasEndSlot","mo","stateChanging","bodyEl","detailsEl","headerEl","contentEl","cacheHeight","label","open","disabled","noHandle","iconRotation","useCacheHeight","nanoOpened","nanoClosed","nanoAfterOpened","nanoAfterClosed","toggleClick","this","show","hide","onKeyDown","e","key","preventDefault","onMouseDown","focus","nanoClose","emit","defaultPrevented","scrollHeight","style","height","displayTransition","className","transitionProp","then","classList","add","setTimeout","nanoOpen","attachMo","Build","isBrowser","MutationObserver","changes","change","type","attributeName","observe","attributes","componentWillLoad","host","querySelector","componentDidLoad","setAttribute","connectedCallback","disconnectedCallback","disconnect","undefined","render","h","Host","class","part","ref","d","details","tabindex","display","id","role","s","onClick","transform","name","div"],"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.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 --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{tokens.$control-focus-style}\n  */\n\n  @include mx.text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --content-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --transition-duration: 0.2s;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{tokens.$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  block-size: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    inline-size: 100%;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(.nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n  Watch,\n  Build,\n  Host,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n  private cacheHeight: number;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + 'px';\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\n    });\n\n    // requestAnimationFrame doesn't trigger transitionend event for firefox :/\n    setTimeout(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + 'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-details\">\n        <details\n          part=\"base\"\n          ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n          class={{\n            details: true,\n            open: this.open,\n            disabled: this.disabled,\n          }}\n        >\n          <summary\n            part=\"header\"\n            aria-controls=\"content\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            tabindex={this.disabled ? '-1' : '0'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            id=\"header\"\n            role=\"button\"\n            class=\"header\"\n            ref={(s) => (this.headerEl = s)}\n            onKeyDown={this.onKeyDown}\n            onClick={this.onMouseDown}\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div part=\"label\" class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </summary>\n          <div\n            part=\"body\"\n            class=\"body\"\n            ref={(div) => (this.bodyEl = div)}\n            tabindex=\"-1\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          >\n            <div\n              part=\"content\"\n              ref={(div) => (this.contentEl = div)}\n              class=\"content\"\n              id=\"content\"\n            >\n              <slot />\n            </div>\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-dialog.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as a,c as o,g as i,h as e,a as t}from"./index-3118109b.js";import{M as n}from"./modal-02828a39.js";import{l as s,u as r}from"./scroll-f373a189.js";import{h as d}from"./slot-1cd90e53.js";import{C as l}from"./component-store-b798181b.js";import"./tabbable-44932eb7.js";import"./dom-d7f9f24c.js";import"./throttle-df960210.js";const h=":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{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";const c=h;let b=0;const f=class{constructor(i){a(this,i);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.nanoInitialFocus=o(this,"nanoInitialFocus",7);this.nanoRequestClose=o(this,"nanoRequestClose",7)}componentId=`dialog-${++b}`;modal;willShow=false;willHide=false;originalTrigger;overlay;dialog;get panel(){return this._panel}set panel(a){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}a.addEventListener("transitionend",this.handleTransitionEnd);this._panel=a}_panel;get host(){return i(this)}noDismiss=false;hasFooter=false;hidden=true;showRibbon=true;open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}label;noHeader=false;noFooter=false;noUserDismiss=false;storeId;storeMethod="url-hash";hoist=false;handleHoistChange(){if("popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow){return}const a=this.nanoShow.emit();if(a.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.hidden=false;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}s(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const a=this.nanoHide.emit();if(a.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}r(this.host)}),300)}handleKeyDown=a=>{if(a.key==="Escape"){this.requestClose()}};requestClose=()=>{const a=this.nanoRequestClose.emit();if(!a.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};handleTransitionEnd=a=>{if(a.propertyName==="opacity"&&a.composedPath().find((a=>a===this.panel||a===this.overlay))){this.willShow=false;this.willHide=false;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit();if(!this.open){this.dialog.hidden=true;this.hidden=true}}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};stopVideos(){const a=Array.from(this.host.querySelectorAll("iframe,video"));a.forEach((a=>{if(a.tagName.toLowerCase()==="video")a.pause();else{const o=a.src;a.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){r(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return e(t,{key:"327adc7c947fac99e0a00e079ec558251d80a266"},e("div",{key:"4e782b64be0681b785e589f5ae5b52a9e9bd2897",part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},e("div",{key:"4cfa8d6ff444bc20e42a0946bd5a516db2fa43d2",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),e("div",{key:"8e9593b9dcaa64414a6d1d9427e10c41015a5dcf",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":!this.hidden?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},e("div",{key:"562360b58859223f106716867976375b4b6b957c",class:"dialog__body-wrap"},!this.noHeader&&e("nano-sticker",{key:"d6087985bfded2e52ab6338735863db986ffe385"},e("header",{key:"efa2a403e7fb7b1c2a57a9dd898238b4429f7c84",part:"header",class:"dialog__header"},e("span",{key:"6c9a2d665dfecb5ae3fc9093e6cb699201449fac",part:"title",class:"dialog__title",id:`${this.componentId}-title`},e("slot",{key:"c5f6c366e8484f30dca2939cc0fc2febd9bfb752",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&e("nano-icon-button",{key:"8bd420a022b705e6d1edbf612aba9b29d8f32ce6",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),e("div",{key:"4dd4fb74f41493039cf35d75fb1d972d8499265c",part:"body",class:"dialog__body"},e("slot",{key:"b30cab20e47d601ea6263816efd9046300959ccd"})),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&e("nano-sticker",{key:"b20eea7258ea5fdb63e3dc6f35dc696bd497774c",position:"bottom"},e("footer",{key:"0bdbc42b440abf68fdb01630795bd869b804f71e",part:"footer",class:"dialog__footer"},e("slot",{key:"1c4cdb096b7010830a35a166edf6844b732d36bb",name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&e("button",{key:"83e320d838a48a6c4bd38f55d8d367ea1a9bbf40",class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};f.style=c;export{f as nano_dialog};
+import{r as a,c as o,g as e,a as i}from"./index-6cc72cd9.js";import{h as t}from"./renderer-4bc3e2dc.js";import{M as n}from"./modal-02828a39.js";import{l as r,u as s}from"./scroll-1afc6a4e.js";import{h as d}from"./slot-1cd90e53.js";import{C as l}from"./component-store-199a9fd8.js";import"./tabbable-44932eb7.js";import"./dom-fafdec9a.js";import"./throttle-df960210.js";const h=":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{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";const c=h;let f=0;const b=class{constructor(e){a(this,e);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.nanoInitialFocus=o(this,"nanoInitialFocus",7);this.nanoRequestClose=o(this,"nanoRequestClose",7)}componentId=`dialog-${++f}`;modal;willShow=false;willHide=false;originalTrigger;overlay;dialog;get panel(){return this._panel}set panel(a){if(this._panel){this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}a.addEventListener("transitionend",this.handleTransitionEnd);this._panel=a}_panel;get host(){return e(this)}noDismiss=false;hasFooter=false;hidden=true;showRibbon=true;open=false;handleOpenChange(){if(this.open)this.show();else this.hide()}label;noHeader=false;noFooter=false;noUserDismiss=false;storeId;storeMethod="url-hash";hoist=false;handleHoistChange(){if("popover"in globalThis.HTMLElement.prototype||!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;nanoInitialFocus;nanoRequestClose;async show(){if(this.willShow){return}const a=this.nanoShow.emit();if(a.defaultPrevented){this.open=false;return}if(this.dialog)this.dialog.hidden=false;this.originalTrigger=document.activeElement;this.willShow=true;this.hidden=false;this.open=true;this.modal.activate();if(typeof this.dialog?.showPopover==="function"){this.dialog.showPopover()}r(this.host);if(this.open){this.host.addEventListener("nanoAfterShow",(()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){this.panel.focus({preventScroll:true})}}),{once:true})}}async hide(){if(this.willHide){return}const a=this.nanoHide.emit();if(a.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();this.stopVideos();const o=this.originalTrigger;if(o&&typeof o.focus==="function"){setTimeout((()=>o.focus()))}setTimeout((()=>{if(!this.open&&typeof this.dialog?.hidePopover==="function"){this.dialog.hidePopover()}s(this.host)}),300)}handleKeyDown=a=>{if(a.key==="Escape"){this.requestClose()}};requestClose=()=>{const a=this.nanoRequestClose.emit();if(!a.defaultPrevented&&!this.noUserDismiss){this.hide()}else{this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250)}};handleTransitionEnd=a=>{if(a.propertyName==="opacity"&&a.composedPath().find((a=>a===this.panel||a===this.overlay))){this.willShow=false;this.willHide=false;if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit();if(!this.open){this.dialog.hidden=true;this.hidden=true}}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};stopVideos(){const a=Array.from(this.host.querySelectorAll("iframe,video"));a.forEach((a=>{if(a.tagName.toLowerCase()==="video")a.pause();else{const o=a.src;a.src=o}}))}connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.dialog.hidden=!this.open}disconnectedCallback(){s(this.host);if(!this.panel)return;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return t(i,{key:"ecd2ed516be353ff67709a8091bb4bf3efe6f250",class:"nano-dialog"},t("div",{key:"c461f3cb97b4bec6409eddf83934cba04d3f649d",part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown,ref:a=>this.dialog=a,popover:"manual"},t("div",{key:"e54d7cf6106039f4d6c19357576de9da241970ab",part:"overlay",class:"dialog__overlay",ref:a=>this.overlay=a,onClick:this.requestClose}),t("div",{key:"0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1",ref:a=>this.panel=a,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":!this.hidden?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:-1},t("div",{key:"3a51d64ddd77f662e2aaea65d5f7ddf0895fb334",class:"dialog__body-wrap"},!this.noHeader&&t("nano-sticker",{key:"43e5d67892f8afeeef5d6528407888175fcedd64"},t("header",{key:"229b41c3da0bdf7af0d2ff7670059d5213e80f6a",part:"header",class:"dialog__header"},t("span",{key:"2432a5424e4307610d9ea546f9fd95010ea15f4f",part:"title",class:"dialog__title",id:`${this.componentId}-title`},t("slot",{key:"fa310058f83f77addd68ebffe137dfe98dd21d02",name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&t("nano-icon-button",{key:"628a2209cc13e3b2b97512debfa5c4495ab63ff3",part:"close-button",exportparts:"base:close-button__base",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/xmark"}))),t("div",{key:"081b6c433700ebfdd17919f007a2a15dc48a9510",part:"body",class:"dialog__body"},t("slot",{key:"704d5a44e1c47d7de9b67b5911bba385991e0c95"})),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&t("nano-sticker",{key:"908ca9562cd246cc520c396725b68026cd610a26",position:"bottom"},t("footer",{key:"9c5c2a8e3c8851b729453a1ac1a35cfeac240302",part:"footer",class:"dialog__footer"},t("slot",{key:"e2b48e7a7ef217c06ee6600f8b2000e3a0906a38",name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&t("button",{key:"f99cee27f04c252ace3fb9f4305013f10cce07fc",class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}static get watchers(){return{open:["handleOpenChange"],hoist:["handleHoistChange"]}}};b.style=c;export{b as nano_dialog};
 //# sourceMappingURL=nano-dialog.entry.js.map