npm - @nanoporetech-digital/components - Versions diffs - 2.9.0 → 2.11.0 - Mend

@nanoporetech-digital/components 2.9.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (660) hide show

package/dist/esm-es5/nano-date-picker.entry.js CHANGED Viewed

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

package/dist/esm-es5/nano-date-picker.entry.js.map CHANGED Viewed

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

package/dist/esm-es5/nano-details.entry.js CHANGED Viewed

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

package/dist/esm-es5/nano-details.entry.js.map CHANGED Viewed

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

package/dist/esm-es5/nano-dialog.entry.js CHANGED Viewed

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