npm - @nanoporetech-digital/components - Versions diffs - 7.6.0 → 7.7.0 - Mend

@nanoporetech-digital/components 7.6.0 → 7.7.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 (680) hide show

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

@@ -1,7 +1,8 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { h, r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-3118109b.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
+import { h } from './renderer-4bc3e2dc.js';
 import { i as isEqual, g as getViewOfMonth, b as inRange, D as DaysOfWeek, p as parseISODate, d as addDays, s as startOfWeek, e as endOfWeek, f as setMonth, h as startOfMonth, j as endOfMonth, k as dateClamp, l as setYear, a as printISODate } from './date-utils-1e39c114.js';
 import { f as focusVisible } from './focus-visible-e5f02c46.js';
 import { c as createColorClasses } from './theme-d553c17a.js';
@@ -104,7 +105,7 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization
             h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
 };
-const datePickerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
+const datePickerCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
 const NanoDatePickerStyle0 = datePickerCss;
 function range(from, to) {
@@ -371,11 +372,11 @@ const DatePicker = class {
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: 'ce15b442e826c9b4857e6edb38f60ef3afe61a92', class: { ...createColorClasses(this.color) } }, h("div", { key: 'fc05eab7b0885719f65c38d6f75575f69e76386c', class: "duet-date" }, h("div", { key: '6caac24cff8adc3b2099f92b3cba63cfb08a279c', class: {
+        return (h(Host, { key: '126b01f14158329419fb42f1e54a02ce4cfb965c', class: { ...createColorClasses(this.color), 'nano-date-picker': true } }, h("div", { key: 'b1122b2aff25ff4f0f584fb8ba180d7b606e3826', class: "duet-date" }, h("div", { key: '6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '16ac7a9237e872b16fcf6a119f7d9d33cceb6db4', class: "duet-date__dialog-content" }, h("div", { key: '2dc8671bf3bfd1142afc07dee3a3c1938c5fb2ef', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '0ab06f5c903d2d2a1b89591ae619e86e698af904', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '23f53dc59c17789d0536329dd89e01dd05e33a5c' }, h("h2", { key: '59ff3f0f4a004c232f47741fc47d3ced11b1ed0e', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '8bd9d43f70b162b0e0c18fb2c80aef74fd0538b3', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '050f1b788e135a5d039b9ef8bb9f3c7c3fb26ef1', class: "duet-date__select" }, h("select", { key: '4917c18110da5dfa9732c93b92bc21d52d31d8b9', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '0d4ae83734c601e1b7e7aab05dc338e2143d006e', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '8b63a0b43277f4ae8a47296c7900532a470038f2' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '03a87211ceeb5ed341f30d1ca4280e45c523f23e', name: "light/chevron-down" }))), h("label", { key: '6e3558a5eca3ff22cd34386835026b60e84a5f62', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7b26df791b9b0d8569bb46dae82ae8dff565f007', class: "duet-date__select" }, h("select", { key: '0fe15c9f98f95e3002fbd3e20a08c08493dfb8fc', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '18c4d1461db645b541d713859b804cf572543b10', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a1ab8275aa3f042ae63b7e3deb156a4ca4164bf0' }, this.focusedDay.getFullYear()), h("nano-icon", { key: 'cbf1cbd255287c03c1488b03a354846bf5d21f51', name: "light/chevron-down" })))), h("div", { key: '6a5220e5cd0f8c38f613e4211463e2adafb81d57', class: "duet-date__nav" }, h("button", { key: '59f20fa24939df05a746fab1e0f122656a8f22a3', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '0dc03af75cc61f12d15c2b33cc176f1d7c9f7428', name: "light/chevron-left" }), h("span", { key: '041f653c9c9c6ddda1bfbf9ca713f1fb978ab387', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '0e5e15bf3648612c8df0d25c8d2eb8a66c2acba1', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'b7be1f142a318fbca29bbaa99f8926f5a4af789f', name: "light/chevron-right" }), h("span", { key: 'f96c71e9a92ee19c90ac6c244220c0ae1e0769e3', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '82c4e92386f93a765db8504d374529c06e321898' }, h(DatePickerMonth, { key: '6cebbdb7ac3024bac0c01fd75098b23eb3ee1696', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd0187c54b6c9ef0de0939f3fc722ffe721b862d8', class: "duet-date__dialog-content" }, h("div", { key: 'ee76a378ad52d1ac71258efc15c8723153c6c58e', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a2a2a170ccf1a6ad341086fcd7443aa2626c8591', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b' }, h("h2", { key: '70c4c43daf51201a0e2a568005a79f328230d324', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '8250e3839dfb6c35f9787aff667b2d141de5fdcd', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'd4a05e88e2df283665c016554c4adce5d26b44ef', class: "duet-date__select" }, h("select", { key: '69363c3bd0f0ccb700acc5e07d58b21626c8c567', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'bda454d4475eec3fe5ae9acc5c8469ecb3d18c05', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd19ab3a704087c802120ccc3302936c731b7562e' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '43a416a07564d92b336f24949e996883bf58d5ee', name: "light/chevron-down" }))), h("label", { key: '70377923f51c50f90e60f67176ff78a33d374ee0', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7bf07568e4a9cf4d8be23d4fc3524387a084c2fd', class: "duet-date__select" }, h("select", { key: 'd93e973816afe3104eb3e758d528710dcb75eaf5', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a702ec49fb3fae14fc45675cfeadf53ebb640d23', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '245198b80ab131426457daa425f3bb29178bd5cd' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '61346903f0755ced93ae4298fbf69c5045411c3d', name: "light/chevron-down" })))), h("div", { key: '58fa6c63619b08701a33b8690c6581d5109aeb48', class: "duet-date__nav" }, h("button", { key: 'c1428835b394a76fc15e7f627b0f1cf223a860d8', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '59a1bfa486467fd186afe8484cb6d36f6361ca31', name: "light/chevron-left" }), h("span", { key: '79b059d58381e91fe5fb3eab5f6c0e4e1f76a481', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9e3bf89c8ba8660985810339f2a26972b8669c9c', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '93ebf9ceb09fd374f99a4b1081d3a604a366c951', name: "light/chevron-right" }), h("span", { key: 'f9bab89b3c09bc9e53ea4d455881a4e9db64b222', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: 'b0a97a8d3aca05ef9db1a69602779e34ccee7bbe' }, h(DatePickerMonth, { key: 'e2dd247425720b2032e9e7a0a951a936d87dd560', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]

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

	@@ -1 +1 @@
1	- {"file":"nano-date-picker.entry.js","mappings":"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","names":[],"sources":["src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["type MonthsNames = [\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n buttonLabel: string;\n placeholder: string;\n selectedDateMessage: string;\n prevMonthLabel: string;\n nextMonthLabel: string;\n monthSelectLabel: string;\n yearSelectLabel: string;\n closeLabel: string;\n keyboardInstruction: string;\n calendarHeading: string;\n dayNames: DayNames;\n monthNames: MonthsNames;\n monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n buttonLabel: 'Choose date',\n placeholder: 'YYYY-MM-DD',\n selectedDateMessage: 'Selected date is',\n prevMonthLabel: 'Previous month',\n nextMonthLabel: 'Next month',\n monthSelectLabel: 'Month',\n yearSelectLabel: 'Year',\n closeLabel: 'Close window',\n keyboardInstruction: 'You can use arrow keys to navigate dates',\n calendarHeading: 'Choose a date',\n dayNames: [\n 'Sunday',\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday',\n ],\n monthNames: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n monthNamesShort: [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n};\n\nexport default localization;\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from '../../../utils/date-utils';\n\nexport type DatePickerDayProps = {\n focusedDay: Date;\n today: Date;\n day: Date;\n inRange: boolean;\n disabled: boolean;\n onDaySelect: (event: MouseEvent, day: Date) => void;\n onKeyboardNavigation: (event: KeyboardEvent) => void;\n focusedDayRef?: (element: HTMLButtonElement) => void;\n isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n focusedDayRef,\n inRange,\n disabled,\n isSelected,\n}) => {\n const isToday = isEqual(day, today);\n const isFocused = isEqual(day, focusedDay);\n const isDisabled = day.getMonth() !== focusedDay.getMonth() \|\| disabled;\n const isOutsideRange = !inRange;\n\n function handleClick(e) {\n onDaySelect(e, day);\n }\n\n return (\n <button\n class={{\n 'duet-date__day': true,\n 'is-outside': isOutsideRange,\n 'is-disabled': isDisabled,\n 'is-today': isToday,\n }}\n tabIndex={isFocused ? 0 : -1}\n onClick={handleClick}\n onKeyDown={onKeyboardNavigation}\n disabled={isOutsideRange}\n type=\"button\"\n aria-pressed={isSelected ? 'true' : 'false'}\n ref={(el) => {\n if (isFocused && el && focusedDayRef) {\n focusedDayRef(el);\n }\n }}\n >\n <span aria-hidden=\"true\">{day.getDate()}</span>\n <span class=\"duet-date__vhidden\">\n {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n </span>\n </button>\n );\n};\n","import { h, FunctionalComponent } from '@stencil/core';\nimport {\n getViewOfMonth,\n inRange,\n DaysOfWeek,\n isEqual,\n} from '../../../utils/date-utils';\nimport { DateDisabledPredicate } from '../date-picker-interface';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport type { DuetLocalizedText } from './date-localization';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n const result = [];\n\n for (let i = 0; i < array.length; i += chunkSize) {\n result.push(array.slice(i, i + chunkSize));\n }\n\n return result;\n}\n\nfunction mapWithOffset<T, U>(\n array: T[],\n startingOffset: number,\n mapFn: (item: T) => U\n): U[] {\n return array.map((_, i) => {\n const adjustedIndex = (i + startingOffset) % array.length;\n return mapFn(array[adjustedIndex]);\n });\n}\n\ntype DatePickerMonthProps = {\n selectedDate: Date;\n focusedDate: Date;\n labelledById: string;\n localization: DuetLocalizedText;\n firstDayOfWeek: DaysOfWeek;\n min?: Date;\n max?: Date;\n onDateSelect: DatePickerDayProps['onDaySelect'];\n onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n focusedDayRef: (element: HTMLButtonElement) => void;\n onFocusIn?: (e: FocusEvent) => void;\n onMouseDown?: (e: MouseEvent) => void;\n isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n onDateSelect,\n onKeyboardNavigation,\n focusedDayRef,\n onMouseDown,\n onFocusIn,\n isDateDisabled,\n}) => {\n const today = new Date();\n const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n return (\n <table\n class=\"duet-date__table\"\n role=\"grid\"\n aria-labelledby={labelledById}\n onFocusin={onFocusIn}\n onMouseDown={onMouseDown}\n >\n <thead>\n <tr>\n {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n <th class=\"duet-date__table-header\" scope=\"col\">\n <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n <span class=\"duet-date__vhidden\">{dayName}</span>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {chunk(days, 7).map((week) => (\n <tr class=\"duet-date__row\">\n {week.map((day) => (\n <td\n class=\"duet-date__cell\"\n role=\"gridcell\"\n aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n >\n <DatePickerDay\n day={day}\n today={today}\n focusedDay={focusedDate}\n inRange={inRange(day, min, max)}\n onDaySelect={onDateSelect}\n onKeyboardNavigation={onKeyboardNavigation}\n focusedDayRef={focusedDayRef}\n disabled={isDateDisabled(day)}\n isSelected={isEqual(day, selectedDate)}\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n","@use '../../global/style/utilities/colours' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --background: defaults to #{tokens.$layer-bg-color}\n * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n * @prop --active-text-color: defaults to var(--nano-color-contrast, #{nano-color(primary, contrast)})\n * @prop --focus-shadow: defaults to #{tokens.$control-focus-style}\n * @prop --inactive-color: defaults to #{tokens.$button-bg-color}\n /\n\n --background: #{tokens.$layer-bg-color};\n --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n --active-text-color:\n var(\n --nano-color-contrast,\n #{tokens.nano-color(primary, contrast)}\n );\n --focus-shadow: #{tokens.$control-focus-style};\n --inactive-color: #{tokens.$button-bg-color};\n\n display: block;\n font-size: 16px;\n}\n\n:host(.nano-color) {\n --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n --active-text-color: #{mx.current-color(contrast)};\n --focus-shadow: #{tokens.$control-focus-size mx.current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date ,\n.duet-date ::before,\n.duet-date ::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n.duet-date {\n box-sizing: border-box;\n color: currentcolor;\n display: block;\n margin: 0;\n position: relative;\n text-align: start;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n display: flex;\n inset-block-start: 100%;\n max-inline-size: 100%;\n inline-size: 100%;\n\n &.is-left {\n inset-inline: auto 0;\n inline-size: auto;\n }\n}\n\n.duet-date__dialog-content {\n background: var(--background);\n min-inline-size: 290px;\n padding-block: 16px 20px;\n padding-inline: 16px;\n position: relative;\n transform: none;\n max-inline-size: 100%;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n border-collapse: collapse;\n border-spacing: 0;\n font-size: 1em;\n line-height: 1;\n text-align: center;\n inline-size: 100%;\n}\n\n.duet-date__table-header {\n font-size: 0.75em;\n font-weight: 600;\n letter-spacing: 1px;\n line-height: 1;\n padding-block-end: 8px;\n text-decoration: none;\n text-transform: uppercase;\n}\n\n.duet-date__cell {\n text-align: center;\n}\n\n.duet-date__day {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: inline-block;\n font-size: 0.875em;\n font-variant-numeric: tabular-nums;\n line-height: 1;\n position: relative;\n text-align: center;\n vertical-align: middle;\n z-index: 1;\n transition: 0.15s ease all;\n block-size: 2.5em;\n inline-size: 2.5em;\n\n &.is-today {\n box-shadow: 0 0 0 1px var(--active-color);\n position: relative;\n }\n\n &:hover::before,\n &.is-today::before {\n content: '';\n background: var(--active-color);\n border-radius: 50%;\n opacity: 0.16;\n position: absolute;\n inset: 0;\n }\n\n [aria-selected='true'] & {\n background: var(--active-color) !important;\n color: var(--active-text-color);\n box-shadow: none;\n outline: 0;\n }\n\n &:active {\n background: var(--active-color);\n box-shadow: var(--focus-shadow);\n color: var(--active-text-color);\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: 0;\n }\n\n &.is-disabled {\n background: transparent;\n box-shadow: none;\n cursor: default;\n opacity: 0.5;\n\n &::before {\n display: none;\n }\n }\n\n &.is-outside {\n background: var(--inactive-color);\n box-shadow: none;\n cursor: default;\n opacity: 0.6;\n pointer-events: none;\n\n &::before {\n display: none;\n }\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-block-end: 16px;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n background: var(--inactive-color);\n align-items: center;\n appearance: none;\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: inline-flex;\n justify-content: space-around;\n margin-inline-start: 8px;\n padding: 0;\n transition: background-color 300ms ease;\n font-size: 0.9em;\n block-size: 2.2em;\n inline-size: 2.2em;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: 0;\n }\n\n &:active:focus {\n box-shadow: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n nano-icon {\n margin-block: 0;\n margin-inline: auto;\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n display: inline-flex;\n margin-block-start: 4px;\n position: relative;\n\n span {\n margin-inline-end: 4px;\n }\n\n select {\n cursor: pointer;\n font-size: 1em;\n block-size: 100%;\n inset-inline-start: 0;\n opacity: 0;\n position: absolute;\n inset-block-start: 0;\n inline-size: 100%;\n z-index: 2;\n\n &.focus-visible:focus + .duet-date__select-label {\n box-shadow: var(--focus-shadow);\n }\n }\n}\n\n.duet-date__select-label {\n align-items: center;\n border-radius: 4px;\n display: flex;\n font-size: 1.25em;\n font-weight: 600;\n line-height: 1;\n padding-block: 0;\n padding-inline: 8px 4px;\n pointer-events: none;\n position: relative;\n inline-size: 100%;\n z-index: 1;\n\n nano-icon {\n font-size: 0.55em;\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n block-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n inset-block-start: 0;\n inline-size: 1px;\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n Element,\n h,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from '@stencil/core';\nimport {\n addDays,\n startOfWeek,\n endOfWeek,\n setMonth,\n setYear,\n dateClamp,\n inRange,\n endOfMonth,\n startOfMonth,\n printISODate,\n parseISODate,\n DaysOfWeek,\n} from '../../utils/date-utils';\n\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport defaultLocalization, {\n type DuetLocalizedText,\n} from './duet-date-picker/date-localization';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport type { Color } from '../../types/shared';\nimport type {\n DateDisabledPredicate,\n PickerChangeEvent,\n} from './date-picker-interface';\n\nfunction range(from: number, to: number) {\n const result: number[] = [];\n for (let i = from; i <= to; i++) {\n result.push(i);\n }\n return result;\n}\n\nlet dateIds = 0;\n\n/*\n A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n /\n@Component({\n tag: 'nano-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n private dateId = `nano-datepicker-${dateIds++}`;\n private monthSelectId = this.dateId + '-' + 'month';\n private yearSelectId = this.dateId + '-' + 'year';\n private dialogLabelId = this.dateId + '-' + 'dialog';\n\n private firstFocusableElement: HTMLElement;\n private monthSelectNode: HTMLElement;\n private yearSelectNode: HTMLElement;\n private focusedDayNode: HTMLButtonElement;\n\n private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n @Element() host: HTMLNanoDatePickerElement;\n\n @State() activeFocus = false;\n @State() focusedDay = new Date();\n\n // Public Property API\n\n /* Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. /\n @Prop({ mutable: true }) selectedDate: string = '';\n\n /* Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property. /\n @Prop() min: string = '';\n\n /* Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property. /\n @Prop() max: string = '';\n\n /* Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday. /\n @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n /* Button labels, day names, month names, etc, used for localization.\n * Default is English. /\n @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n /* The color to use from the application's color palette. /\n @Prop() color?: Color;\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n * @returns `false` for not disabled and `true` for disabled\n /\n @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n /* Controls whether the picker is a modal or dialog,\n * popup control and will therefore keep focus within the control /\n @Prop() isModal: boolean = false;\n\n /* @internal First focusable element. Relevant for keeping focus within the control /\n @Prop() firstFocusEle: HTMLElement;\n\n // Events\n\n /* Event emitted when a date is selected. /\n @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n // Public methods API\n\n /* Focus to the calendar\n * @param day - focus to the current selected day\n * @param forceFocusVisible - force visible focus - required if opened via keyboad\n /\n @Method()\n async setFocus(day = false, forceFocusVisible = false) {\n this.setFocusedDay(parseISODate(this.selectedDate) \|\| new Date());\n\n if (day) {\n setTimeout((_) => this.focusedDayNode.focus(), 20);\n return;\n }\n clearTimeout(this.focusTimeoutId);\n this.focusTimeoutId = setTimeout(() => {\n if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n this.monthSelectNode.focus();\n }, 20);\n }\n\n @Watch('selectedDate')\n handleSelectedDateChange() {\n this.setFocus(true);\n }\n\n // Local methods.\n\n private enableActiveFocus = () => {\n this.activeFocus = true;\n };\n\n private disableActiveFocus = () => {\n this.activeFocus = false;\n };\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days));\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months);\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years);\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month);\n const max = endOfMonth(min);\n const date = setMonth(this.focusedDay, month);\n\n this.setFocusedDay(dateClamp(date, min, max));\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year);\n const max = endOfMonth(min);\n const date = setYear(this.focusedDay, year);\n\n this.setFocusedDay(dateClamp(date, min, max));\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = dateClamp(\n day,\n parseISODate(this.min),\n parseISODate(this.max)\n );\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchMove = (event: TouchEvent) => {\n event.preventDefault();\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n if (isHorizontalSwipe) {\n this.addMonths(distX < 0 ? 1 : -1);\n }\n\n this.initialTouchY = null;\n this.initialTouchX = null;\n };\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault();\n this.addMonths(1);\n };\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault();\n this.addMonths(-1);\n };\n\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\n // handle tab separately, since it needs to be treated\n // differently to other keyboard interactions\n if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n event.preventDefault();\n const ele = this.firstFocusEle \|\| this.firstFocusableElement;\n ele.focus();\n return;\n }\n\n let handled = true;\n\n switch (event.key) {\n case 'ArrowRight':\n this.addDays(1);\n break;\n case 'ArrowLeft':\n this.addDays(-1);\n break;\n case 'ArrowDown':\n this.addDays(7);\n break;\n case 'ArrowUp':\n this.addDays(-7);\n break;\n case 'PageUp':\n if (event.shiftKey) {\n this.addYears(-1);\n } else {\n this.addMonths(-1);\n }\n break;\n case 'PageDown':\n if (event.shiftKey) {\n this.addYears(1);\n } else {\n this.addMonths(1);\n }\n break;\n case 'Home':\n this.startOfWeek();\n break;\n case 'End':\n this.endOfWeek();\n break;\n default:\n handled = false;\n }\n\n if (handled) {\n event.preventDefault();\n this.enableActiveFocus();\n }\n };\n\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\n const isAllowed = !this.isDateDisabled(day);\n const isInRange = inRange(\n day,\n parseISODate(this.min),\n parseISODate(this.max)\n );\n\n if (!isInRange \|\| !isAllowed) {\n return;\n }\n\n if (day.getMonth() === this.focusedDay.getMonth()) {\n this.setValue(day);\n } else {\n this.setFocusedDay(day);\n }\n };\n\n private handleMonthSelect = (e) => {\n this.setMonth(parseInt(e.target.value, 10));\n };\n\n private handleYearSelect = (e) => {\n this.setYear(parseInt(e.target.value, 10));\n };\n\n private setValue(date: Date) {\n this.selectedDate = printISODate(date);\n this.nanoDatePicked.emit({\n value: this.selectedDate,\n valueAsDate: date,\n });\n }\n\n private processFocusedDayNode = (element: HTMLButtonElement) => {\n this.focusedDayNode = element;\n\n if (this.activeFocus) {\n setTimeout(() => element.focus(), 0);\n }\n };\n\n connectedCallback() {\n if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n }\n\n componentWillLoad() {\n this.handleSelectedDateChange();\n }\n\n componentDidLoad() {\n this.connectedCallback();\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.yearSelectNode);\n focusVisible.unobserve(this.monthSelectNode);\n }\n\n render() {\n const valueAsDate = parseISODate(this.selectedDate);\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear();\n const focusedMonth = this.focusedDay.getMonth();\n const focusedYear = this.focusedDay.getFullYear();\n\n const minDate = parseISODate(this.min);\n const maxDate = parseISODate(this.max);\n const prevMonthDisabled =\n minDate != null &&\n minDate.getMonth() === focusedMonth &&\n minDate.getFullYear() === focusedYear;\n const nextMonthDisabled =\n maxDate != null &&\n maxDate.getMonth() === focusedMonth &&\n maxDate.getFullYear() === focusedYear;\n\n let minYear = selectedYear - 10;\n let maxYear = selectedYear + 10;\n if (minDate) minYear = minDate.getFullYear();\n if (maxDate) maxYear = maxDate.getFullYear();\n\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div class=\"duet-date\">\n <div\n class={{\n 'duet-date__dialog': true,\n 'is-active': true,\n }}\n onTouchMove={this.handleTouchMove}\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div class=\"duet-date__dialog-content\">\n <div\n class=\"duet-date__vhidden duet-date__instructions\"\n aria-live=\"polite\"\n >\n {this.localization.keyboardInstruction}\n </div>\n {/\n With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n * here which is wrong for the TS types, but ends up with the correct event listener\n * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n */}\n <div\n class=\"duet-date__header\"\n onFocusin={this.disableActiveFocus}\n >\n <div>\n <h2\n id={this.dialogLabelId}\n class=\"duet-date__vhidden\"\n aria-live=\"polite\"\n >\n {this.localization.monthNames[focusedMonth]}{' '}\n {this.focusedDay.getFullYear()}\n </h2>\n <label\n htmlFor={this.monthSelectId}\n class=\"duet-date__vhidden\"\n >\n {this.localization.monthSelectLabel}\n </label>\n <div class=\"duet-date__select\">\n <select\n id={this.monthSelectId}\n class=\"duet-date__select--month\"\n ref={(element) =>\n (this.firstFocusableElement = this.monthSelectNode =\n element)\n }\n onChange={this.handleMonthSelect}\n >\n {this.localization.monthNames.map((month, i) => (\n <option\n key={month}\n value={i}\n selected={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </option>\n ))}\n </select>\n <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n <span>\n {this.localization.monthNamesShort[focusedMonth]}\n </span>\n <nano-icon name=\"light/chevron-down\"></nano-icon>\n </div>\n </div>\n\n <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n {this.localization.yearSelectLabel}\n </label>\n <div class=\"duet-date__select\">\n <select\n id={this.yearSelectId}\n class=\"duet-date__select--year\"\n onChange={this.handleYearSelect}\n ref={(element) => (this.yearSelectNode = element)}\n >\n {range(minYear, maxYear).map((year) => (\n <option key={year} selected={year === focusedYear}>\n {year}\n </option>\n ))}\n </select>\n <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n <span>{this.focusedDay.getFullYear()}</span>\n <nano-icon name=\"light/chevron-down\" />\n </div>\n </div>\n </div>\n\n <div class=\"duet-date__nav\">\n <button\n class=\"duet-date__prev\"\n onClick={this.handlePreviousMonthClick}\n disabled={prevMonthDisabled}\n type=\"button\"\n >\n <nano-icon name=\"light/chevron-left\" />\n <span class=\"duet-date__vhidden\">\n {this.localization.prevMonthLabel}\n </span>\n </button>\n <button\n class=\"duet-date__next\"\n onClick={this.handleNextMonthClick}\n disabled={nextMonthDisabled}\n type=\"button\"\n >\n <nano-icon name=\"light/chevron-right\" />\n <span class=\"duet-date__vhidden\">\n {this.localization.nextMonthLabel}\n </span>\n </button>\n </div>\n </div>\n <div>\n <DatePickerMonth\n selectedDate={valueAsDate}\n focusedDate={this.focusedDay}\n onDateSelect={this.handleDaySelect}\n onKeyboardNavigation={this.handleKeyboardNavigation}\n labelledById={this.dialogLabelId}\n localization={this.localization}\n firstDayOfWeek={this.firstDayOfWeek}\n focusedDayRef={this.processFocusedDayNode}\n min={minDate}\n max={maxDate}\n isDateDisabled={this.isDateDisabled}\n />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"nano-date-picker.entry.js","mappings":";;;;;;;;;AAgCA,MAAM,YAAY,GAAsB;IACtC,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,YAAY;IACzB,mBAAmB,EAAE,kBAAkB;IACvC,cAAc,EAAE,gBAAgB;IAChC,cAAc,EAAE,YAAY;IAC5B,gBAAgB,EAAE,OAAO;IACzB,eAAe,EAAE,MAAM;IACvB,UAAU,EAAE,cAAc;IAC1B,mBAAmB,EAAE,0CAA0C;IAC/D,eAAe,EAAE,eAAe;IAChC,QAAQ,EAAE;QACR,QAAQ;QACR,QAAQ;QACR,SAAS;QACT,WAAW;QACX,UAAU;QACV,QAAQ;QACR,UAAU;KACX;IACD,UAAU,EAAE;QACV,SAAS;QACT,UAAU;QACV,OAAO;QACP,OAAO;QACP,KAAK;QACL,MAAM;QACN,MAAM;QACN,QAAQ;QACR,WAAW;QACX,SAAS;QACT,UAAU;QACV,UAAU;KACX;IACD,eAAe,EAAE;QACf,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;KACN;CACF,CAAC;AAEF,4BAAe,YAAY;;AClEpB,MAAM,aAAa,GAA4C,CAAC,EACrE,UAAU,EACV,KAAK,EACL,GAAG,EACH,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,OAAO,EACP,QAAQ,EACR,UAAU,GACX;IACC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACpC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC3C,MAAM,UAAU,GAAG,GAAG,CAAC,QAAQ,EAAE,KAAK,UAAU,CAAC,QAAQ,EAAE,IAAI,QAAQ,CAAC;IACxE,MAAM,cAAc,GAAG,CAAC,OAAO,CAAC;IAEhC,SAAS,WAAW,CAAC,CAAC;QACpB,WAAW,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;KACrB;IAED,QACE,cACE,KAAK,EAAE;YACL,gBAAgB,EAAE,IAAI;YACtB,YAAY,EAAE,cAAc;YAC5B,aAAa,EAAE,UAAU;YACzB,UAAU,EAAE,OAAO;SACpB,EACD,QAAQ,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,oBAAoB,EAC/B,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,kBACC,UAAU,GAAG,MAAM,GAAG,OAAO,EAC3C,GAAG,EAAE,CAAC,EAAE;YACN,IAAI,SAAS,IAAI,EAAE,IAAI,aAAa,EAAE;gBACpC,aAAa,CAAC,EAAE,CAAC,CAAC;aACnB;SACF;QAED,2BAAkB,MAAM,IAAE,GAAG,CAAC,OAAO,EAAE,CAAQ;QAC/C,YAAM,KAAK,EAAC,oBAAoB,IAC7B,GAAG,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAChE,CACA,EACT;AACJ,CAAC;;AClDD,SAAS,KAAK,CAAI,KAAU,EAAE,SAAiB;IAC7C,MAAM,MAAM,GAAG,EAAE,CAAC;IAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,SAAS,EAAE;QAChD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC;KAC5C;IAED,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,aAAa,CACpB,KAAU,EACV,cAAsB,EACtB,KAAqB;IAErB,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACpB,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,cAAc,IAAI,KAAK,CAAC,MAAM,CAAC;QAC1D,OAAO,KAAK,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC;KACpC,CAAC,CAAC;AACL,CAAC;AAkBM,MAAM,eAAe,GAA8C,CAAC,EACzE,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,GAAG,EACH,GAAG,EACH,YAAY,EACZ,oBAAoB,EACpB,aAAa,EACb,WAAW,EACX,SAAS,EACT,cAAc,GACf;IACC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,MAAM,IAAI,GAAG,cAAc,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;IAEzD,QACE,aACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,MAAM,qBACM,YAAY,EAC7B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW;QAExB;YACE,cACG,aAAa,CAAC,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,CAAC,OAAO,MAC5D,UAAI,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAC,KAAK;gBAC7C,2BAAkB,MAAM,IAAE,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;gBACtD,YAAM,KAAK,EAAC,oBAAoB,IAAE,OAAO,CAAQ,CAC9C,CACN,CAAC,CACC,CACC;QACR,iBACG,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MACvB,UAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACZ,UACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,UAAU,mBACA,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,GAAG,MAAM,GAAG,SAAS;YAE9D,EAAC,aAAa,IACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,WAAW,EACvB,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAC/B,WAAW,EAAE,YAAY,EACzB,oBAAoB,EAAE,oBAAoB,EAC1C,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,cAAc,CAAC,GAAG,CAAC,EAC7B,UAAU,EAAE,OAAO,CAAC,GAAG,EAAE,YAAY,CAAC,GACtC,CACC,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,EACR;AACJ,CAAC;;AChHD,MAAM,aAAa,GAAG,y8IAAy8I,CAAC;AACh+I,6BAAe,aAAa;;ACuC5B,SAAS,KAAK,CAAC,IAAY,EAAE,EAAU;IACrC,MAAM,MAAM,GAAa,EAAE,CAAC;IAC5B,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;QAC/B,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;KAChB;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,IAAI,OAAO,GAAG,CAAC,CAAC;MAWH,UAAU;;;;;IACb,MAAM,GAAG,mBAAmB,OAAO,EAAE,EAAE,CAAC;IACxC,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,OAAO,CAAC;IAC5C,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC;IAC1C,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7C,qBAAqB,CAAc;IACnC,eAAe,CAAc;IAC7B,cAAc,CAAc;IAC5B,cAAc,CAAoB;IAElC,cAAc,CAAgC;IAE9C,aAAa,GAAW,IAAI,CAAC;IAC7B,aAAa,GAAW,IAAI,CAAC;;IAI5B,WAAW,GAAG,KAAK,CAAC;IACpB,UAAU,GAAG,IAAI,IAAI,EAAE,CAAC;;;IAKR,YAAY,GAAW,EAAE,CAAC;;;IAI3C,GAAG,GAAW,EAAE,CAAC;;;IAIjB,GAAG,GAAW,EAAE,CAAC;;;IAIjB,cAAc,GAAe,UAAU,CAAC,MAAM,CAAC;;;IAI/C,YAAY,GAAsB,mBAAmB,CAAC;;IAGtD,KAAK,CAAS;;;;;;IAOd,cAAc,GAA0B,MAAM,KAAK,CAAC;;;IAIpD,OAAO,GAAY,KAAK,CAAC;;IAGzB,aAAa,CAAc;;;IAK1B,cAAc,CAAkC;;;;;;IASzD,MAAM,QAAQ,CAAC,GAAG,GAAG,KAAK,EAAE,iBAAiB,GAAG,KAAK;QACnD,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;QAElE,IAAI,GAAG,EAAE;YACP,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACnD,OAAO;SACR;QACD,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;YAC/B,IAAI,iBAAiB;gBAAE,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAChE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;SAC9B,EAAE,EAAE,CAAC,CAAC;KACR;IAGD,wBAAwB;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACrB;;IAIO,iBAAiB,GAAG;QAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB,CAAC;IAEM,kBAAkB,GAAG;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;KAC1B,CAAC;IAEM,OAAO,CAAC,IAAY;QAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;KACpD;IAEO,SAAS,CAAC,MAAc;QAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,MAAM,CAAC,CAAC;KACpD;IAEO,QAAQ,CAAC,KAAa;QAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,CAAC;KACrD;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;KACvE;IAEO,SAAS;QACf,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;KACrE;IAEO,QAAQ,CAAC,KAAa;QAC5B,MAAM,GAAG,GAAG,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC;QAC3D,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5B,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;QAE9C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;KAC/C;IAEO,OAAO,CAAC,IAAY;QAC1B,MAAM,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;QACzD,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;QAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QAE5C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;KAC/C;IAEO,aAAa,CAAC,GAAS;QAC7B,IAAI,CAAC,UAAU,GAAG,SAAS,CACzB,GAAG,EACH,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EACtB,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CACvB,CAAC;KACH;IAEO,gBAAgB,GAAG,CAAC,KAAiB;QAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;KAClC,CAAC;IAEM,eAAe,GAAG,CAAC,KAAiB;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB,CAAC;IAEM,cAAc,GAAG,CAAC,KAAiB;QACzC,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/C,MAAM,SAAS,GAAG,EAAE,CAAC;QAErB,MAAM,iBAAiB,GACrB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;QAE/D,IAAI,iBAAiB,EAAE;YACrB,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;SACpC;QAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B,CAAC;IAEM,oBAAoB,GAAG,CAAC,KAAiB;QAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KACnB,CAAC;IAEM,wBAAwB,GAAG,CAAC,KAAiB;QACnD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;KACpB,CAAC;IAEM,wBAAwB,GAAG,CAAC,KAAoB;;;QAGtD,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,qBAAqB,CAAC;YAC7D,GAAG,CAAC,KAAK,EAAE,CAAC;YACZ,OAAO;SACR;QAED,IAAI,OAAO,GAAG,IAAI,CAAC;QAEnB,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,YAAY;gBACf,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAChB,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAChB,MAAM;YACR,KAAK,SAAS;gBACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;iBACnB;qBAAM;oBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;iBACpB;gBACD,MAAM;YACR,KAAK,UAAU;gBACb,IAAI,KAAK,CAAC,QAAQ,EAAE;oBAClB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;iBAClB;qBAAM;oBACL,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;iBACnB;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,MAAM;YACR;gBACE,OAAO,GAAG,KAAK,CAAC;SACnB;QAED,IAAI,OAAO,EAAE;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;KACF,CAAC;IAEM,eAAe,GAAG,CAAC,MAAkB,EAAE,GAAS;QACtD,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;QAC5C,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EACH,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EACtB,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CACvB,CAAC;QAEF,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,EAAE;YAC5B,OAAO;SACR;QAED,IAAI,GAAG,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE;YACjD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;SACpB;aAAM;YACL,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;SACzB;KACF,CAAC;IAEM,iBAAiB,GAAG,CAAC,CAAC;QAC5B,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;KAC7C,CAAC;IAEM,gBAAgB,GAAG,CAAC,CAAC;QAC3B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;KAC5C,CAAC;IAEM,QAAQ,CAAC,IAAU;QACzB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,IAAI,CAAC,YAAY;YACxB,WAAW,EAAE,IAAI;SAClB,CAAC,CAAC;KACJ;IAEO,qBAAqB,GAAG,CAAC,OAA0B;QACzD,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;QAE9B,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,UAAU,CAAC,MAAM,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;SACtC;KACF,CAAC;IAEF,iBAAiB;QACf,IAAI,IAAI,CAAC,cAAc;YAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnE,IAAI,IAAI,CAAC,eAAe;YAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACtE;IAED,iBAAiB;QACf,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,oBAAoB;QAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC5C,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACpD,MAAM,YAAY,GAAG,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,CAAC;QACpE,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;QAChD,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;QAElD,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,iBAAiB,GACrB,OAAO,IAAI,IAAI;YACf,OAAO,CAAC,QAAQ,EAAE,KAAK,YAAY;YACnC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC;QACxC,MAAM,iBAAiB,GACrB,OAAO,IAAI,IAAI;YACf,OAAO,CAAC,QAAQ,EAAE,KAAK,YAAY;YACnC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC;QAExC,IAAI,OAAO,GAAG,YAAY,GAAG,EAAE,CAAC;QAChC,IAAI,OAAO,GAAG,YAAY,GAAG,EAAE,CAAC;QAChC,IAAI,OAAO;YAAE,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;QAC7C,IAAI,OAAO;YAAE,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;QAE7C,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,IAEtE,4DAAK,KAAK,EAAC,WAAW,IACpB,4DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,WAAW,EAAE,IAAI;aAClB,EACD,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,UAAU,EAAE,IAAI,CAAC,cAAc,IAE/B,4DAAK,KAAK,EAAC,2BAA2B,IACpC,4DACE,KAAK,EAAC,4CAA4C,eACxC,QAAQ,IAEjB,IAAI,CAAC,YAAY,CAAC,mBAAmB,CAClC,EAON,4DACE,KAAK,EAAC,mBAAmB,EACzB,SAAS,EAAE,IAAI,CAAC,kBAAkB,IAElC,8DACE,2DACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,KAAK,EAAC,oBAAoB,eAChB,QAAQ,IAEjB,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,GAAG,EAC/C,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAC3B,EACL,8DACE,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,KAAK,EAAC,oBAAoB,IAEzB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAC7B,EACR,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+DACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,KAAK,EAAC,0BAA0B,EAChC,GAAG,EAAE,CAAC,OAAO,MACV,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,eAAe;gBAChD,OAAO,CAAC,EAEZ,QAAQ,EAAE,IAAI,CAAC,iBAAiB,IAE/B,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,MACzC,cACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,CAAC,KAAK,YAAY,EAC5B,QAAQ,EACN,CAAC,OAAO,CACN,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,EAC3B,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,EACtC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CACrC,IAGF,KAAK,CACC,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,yBAAyB,iBAAa,MAAM,IACrD,+DACG,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,YAAY,CAAC,CAC3C,EACP,kEAAW,IAAI,EAAC,oBAAoB,GAAa,CAC7C,CACF,EAEN,8DAAO,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAC,oBAAoB,IAC1D,IAAI,CAAC,YAAY,CAAC,eAAe,CAC5B,EACR,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+DACE,EAAE,EAAE,IAAI,CAAC,YAAY,EACrB,KAAK,EAAC,yBAAyB,EAC/B,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,IAEhD,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,MAChC,cAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,KAAK,WAAW,IAC9C,IAAI,CACE,CACV,CAAC,CACK,EACT,4DAAK,KAAK,EAAC,yBAAyB,iBAAa,MAAM,IACrD,+DAAO,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAQ,EAC5C,kEAAW,IAAI,EAAC,oBAAoB,GAAG,CACnC,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,gBAAgB,IACzB,+DACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,wBAAwB,EACtC,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,IAEb,kEAAW,IAAI,EAAC,oBAAoB,GAAG,EACvC,6DAAM,KAAK,EAAC,oBAAoB,IAC7B,IAAI,CAAC,YAAY,CAAC,cAAc,CAC5B,CACA,EACT,+DACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,QAAQ,EAAE,iBAAiB,EAC3B,IAAI,EAAC,QAAQ,IAEb,kEAAW,IAAI,EAAC,qBAAqB,GAAG,EACxC,6DAAM,KAAK,EAAC,oBAAoB,IAC7B,IAAI,CAAC,YAAY,CAAC,cAAc,CAC5B,CACA,CACL,CACF,EACN,8DACE,EAAC,eAAe,qDACd,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,UAAU,EAC5B,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,oBAAoB,EAAE,IAAI,CAAC,wBAAwB,EACnD,YAAY,EAAE,IAAI,CAAC,aAAa,EAChC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,aAAa,EAAE,IAAI,CAAC,qBAAqB,EACzC,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,OAAO,EACZ,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACE,CACF,CACF,CACF,CACD,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["type MonthsNames = [\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string,\n string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n buttonLabel: string;\n placeholder: string;\n selectedDateMessage: string;\n prevMonthLabel: string;\n nextMonthLabel: string;\n monthSelectLabel: string;\n yearSelectLabel: string;\n closeLabel: string;\n keyboardInstruction: string;\n calendarHeading: string;\n dayNames: DayNames;\n monthNames: MonthsNames;\n monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n buttonLabel: 'Choose date',\n placeholder: 'YYYY-MM-DD',\n selectedDateMessage: 'Selected date is',\n prevMonthLabel: 'Previous month',\n nextMonthLabel: 'Next month',\n monthSelectLabel: 'Month',\n yearSelectLabel: 'Year',\n closeLabel: 'Close window',\n keyboardInstruction: 'You can use arrow keys to navigate dates',\n calendarHeading: 'Choose a date',\n dayNames: [\n 'Sunday',\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday',\n ],\n monthNames: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n monthNamesShort: [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n};\n\nexport default localization;\n","import { FunctionalComponent } from '@stencil/core';\nimport { h } from '../../../utils/renderer';\nimport { isEqual } from '../../../utils/date-utils';\n\nexport type DatePickerDayProps = {\n focusedDay: Date;\n today: Date;\n day: Date;\n inRange: boolean;\n disabled: boolean;\n onDaySelect: (event: MouseEvent, day: Date) => void;\n onKeyboardNavigation: (event: KeyboardEvent) => void;\n focusedDayRef?: (element: HTMLButtonElement) => void;\n isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n focusedDayRef,\n inRange,\n disabled,\n isSelected,\n}) => {\n const isToday = isEqual(day, today);\n const isFocused = isEqual(day, focusedDay);\n const isDisabled = day.getMonth() !== focusedDay.getMonth() \|\| disabled;\n const isOutsideRange = !inRange;\n\n function handleClick(e) {\n onDaySelect(e, day);\n }\n\n return (\n <button\n class={{\n 'duet-date__day': true,\n 'is-outside': isOutsideRange,\n 'is-disabled': isDisabled,\n 'is-today': isToday,\n }}\n tabIndex={isFocused ? 0 : -1}\n onClick={handleClick}\n onKeyDown={onKeyboardNavigation}\n disabled={isOutsideRange}\n type=\"button\"\n aria-pressed={isSelected ? 'true' : 'false'}\n ref={(el) => {\n if (isFocused && el && focusedDayRef) {\n focusedDayRef(el);\n }\n }}\n >\n <span aria-hidden=\"true\">{day.getDate()}</span>\n <span class=\"duet-date__vhidden\">\n {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n </span>\n </button>\n );\n};\n","import { FunctionalComponent } from '@stencil/core';\nimport { h } from '../../../utils/renderer';\nimport {\n getViewOfMonth,\n inRange,\n DaysOfWeek,\n isEqual,\n} from '../../../utils/date-utils';\nimport { DateDisabledPredicate } from '../date-picker-interface';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport type { DuetLocalizedText } from './date-localization';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n const result = [];\n\n for (let i = 0; i < array.length; i += chunkSize) {\n result.push(array.slice(i, i + chunkSize));\n }\n\n return result;\n}\n\nfunction mapWithOffset<T, U>(\n array: T[],\n startingOffset: number,\n mapFn: (item: T) => U\n): U[] {\n return array.map((_, i) => {\n const adjustedIndex = (i + startingOffset) % array.length;\n return mapFn(array[adjustedIndex]);\n });\n}\n\ntype DatePickerMonthProps = {\n selectedDate: Date;\n focusedDate: Date;\n labelledById: string;\n localization: DuetLocalizedText;\n firstDayOfWeek: DaysOfWeek;\n min?: Date;\n max?: Date;\n onDateSelect: DatePickerDayProps['onDaySelect'];\n onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n focusedDayRef: (element: HTMLButtonElement) => void;\n onFocusIn?: (e: FocusEvent) => void;\n onMouseDown?: (e: MouseEvent) => void;\n isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n onDateSelect,\n onKeyboardNavigation,\n focusedDayRef,\n onMouseDown,\n onFocusIn,\n isDateDisabled,\n}) => {\n const today = new Date();\n const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n return (\n <table\n class=\"duet-date__table\"\n role=\"grid\"\n aria-labelledby={labelledById}\n onFocusin={onFocusIn}\n onMouseDown={onMouseDown}\n >\n <thead>\n <tr>\n {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n <th class=\"duet-date__table-header\" scope=\"col\">\n <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n <span class=\"duet-date__vhidden\">{dayName}</span>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {chunk(days, 7).map((week) => (\n <tr class=\"duet-date__row\">\n {week.map((day) => (\n <td\n class=\"duet-date__cell\"\n role=\"gridcell\"\n aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n >\n <DatePickerDay\n day={day}\n today={today}\n focusedDay={focusedDate}\n inRange={inRange(day, min, max)}\n onDaySelect={onDateSelect}\n onKeyboardNavigation={onKeyboardNavigation}\n focusedDayRef={focusedDayRef}\n disabled={isDateDisabled(day)}\n isSelected={isEqual(day, selectedDate)}\n />\n </td>\n ))}\n </tr>\n ))}\n </tbody>\n </table>\n );\n};\n","@use '../../global/style/utilities/colours' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --background: defaults to #{tokens.$layer-bg-color}\n * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n * @prop --active-text-color: defaults to var(--nano-color-contrast, #{nano-color(primary, contrast)})\n * @prop --focus-shadow: defaults to #{tokens.$control-focus-style}\n * @prop --inactive-color: defaults to #{tokens.$button-bg-color}\n /\n\n --background: #{tokens.$layer-bg-color};\n --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n --active-text-color:\n var(\n --nano-color-contrast,\n #{tokens.nano-color(primary, contrast)}\n );\n --focus-shadow: #{tokens.$control-focus-style};\n --inactive-color: #{tokens.$button-bg-color};\n\n display: block;\n font-size: 16px;\n}\n\n:host(.nano-color) {\n --active-color: var(--nano-color-base, #{tokens.nano-color(primary, base)});\n --active-text-color: #{mx.current-color(contrast)};\n --focus-shadow: #{tokens.$control-focus-size mx.current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date ,\n.duet-date ::before,\n.duet-date ::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n.duet-date {\n box-sizing: border-box;\n color: currentcolor;\n display: block;\n margin: 0;\n position: relative;\n text-align: start;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n display: flex;\n inset-block-start: 100%;\n max-inline-size: 100%;\n inline-size: 100%;\n\n &.is-left {\n inset-inline: auto 0;\n inline-size: auto;\n }\n}\n\n.duet-date__dialog-content {\n background: var(--background);\n min-inline-size: 290px;\n padding-block: 16px 20px;\n padding-inline: 16px;\n position: relative;\n transform: none;\n max-inline-size: 100%;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n border-collapse: collapse;\n border-spacing: 0;\n font-size: 1em;\n line-height: 1;\n text-align: center;\n inline-size: 100%;\n}\n\n.duet-date__table-header {\n font-size: 0.75em;\n font-weight: 600;\n letter-spacing: 1px;\n line-height: 1;\n padding-block-end: 8px;\n text-decoration: none;\n text-transform: uppercase;\n}\n\n.duet-date__cell {\n text-align: center;\n}\n\n.duet-date__day {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: inline-block;\n font-size: 0.875em;\n font-variant-numeric: tabular-nums;\n line-height: 1;\n position: relative;\n text-align: center;\n vertical-align: middle;\n z-index: 1;\n transition: 0.15s ease all;\n block-size: 2.5em;\n inline-size: 2.5em;\n\n &.is-today {\n box-shadow: 0 0 0 1px var(--active-color);\n position: relative;\n }\n\n &:hover::before,\n &.is-today::before {\n content: '';\n background: var(--active-color);\n border-radius: 50%;\n opacity: 0.16;\n position: absolute;\n inset: 0;\n }\n\n [aria-selected='true'] & {\n background: var(--active-color) !important;\n color: var(--active-text-color);\n box-shadow: none;\n outline: 0;\n }\n\n &:active {\n background: var(--active-color);\n box-shadow: var(--focus-shadow);\n color: var(--active-text-color);\n }\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: 0;\n }\n\n &.is-disabled {\n background: transparent;\n box-shadow: none;\n cursor: default;\n opacity: 0.5;\n\n &::before {\n display: none;\n }\n }\n\n &.is-outside {\n background: var(--inactive-color);\n box-shadow: none;\n cursor: default;\n opacity: 0.6;\n pointer-events: none;\n\n &::before {\n display: none;\n }\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n align-items: center;\n display: flex;\n justify-content: space-between;\n margin-block-end: 16px;\n inline-size: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n background: var(--inactive-color);\n align-items: center;\n appearance: none;\n border: 0;\n border-radius: 50%;\n cursor: pointer;\n display: inline-flex;\n justify-content: space-around;\n margin-inline-start: 8px;\n padding: 0;\n transition: background-color 300ms ease;\n font-size: 0.9em;\n block-size: 2.2em;\n inline-size: 2.2em;\n\n &:focus {\n box-shadow: var(--focus-shadow);\n outline: 0;\n }\n\n &:active:focus {\n box-shadow: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .nano-icon {\n margin-block: 0;\n margin-inline: auto;\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n display: inline-flex;\n margin-block-start: 4px;\n position: relative;\n\n span {\n margin-inline-end: 4px;\n }\n\n select {\n cursor: pointer;\n font-size: 1em;\n block-size: 100%;\n inset-inline-start: 0;\n opacity: 0;\n position: absolute;\n inset-block-start: 0;\n inline-size: 100%;\n z-index: 2;\n\n &.focus-visible:focus + .duet-date__select-label {\n box-shadow: var(--focus-shadow);\n }\n }\n}\n\n.duet-date__select-label {\n align-items: center;\n border-radius: 4px;\n display: flex;\n font-size: 1.25em;\n font-weight: 600;\n line-height: 1;\n padding-block: 0;\n padding-inline: 8px 4px;\n pointer-events: none;\n position: relative;\n inline-size: 100%;\n z-index: 1;\n\n .nano-icon {\n font-size: 0.55em;\n }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n block-size: 1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n inset-block-start: 0;\n inline-size: 1px;\n}\n","import {\n Component,\n ComponentInterface,\n Host,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n addDays,\n startOfWeek,\n endOfWeek,\n setMonth,\n setYear,\n dateClamp,\n inRange,\n endOfMonth,\n startOfMonth,\n printISODate,\n parseISODate,\n DaysOfWeek,\n} from '../../utils/date-utils';\n\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport defaultLocalization, {\n type DuetLocalizedText,\n} from './duet-date-picker/date-localization';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport type { Color } from '../../types/shared';\nimport type {\n DateDisabledPredicate,\n PickerChangeEvent,\n} from './date-picker-interface';\n\nfunction range(from: number, to: number) {\n const result: number[] = [];\n for (let i = from; i <= to; i++) {\n result.push(i);\n }\n return result;\n}\n\nlet dateIds = 0;\n\n/*\n A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n /\n@Component({\n tag: 'nano-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n private dateId = `nano-datepicker-${dateIds++}`;\n private monthSelectId = this.dateId + '-' + 'month';\n private yearSelectId = this.dateId + '-' + 'year';\n private dialogLabelId = this.dateId + '-' + 'dialog';\n\n private firstFocusableElement: HTMLElement;\n private monthSelectNode: HTMLElement;\n private yearSelectNode: HTMLElement;\n private focusedDayNode: HTMLButtonElement;\n\n private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n @Element() host: HTMLNanoDatePickerElement;\n\n @State() activeFocus = false;\n @State() focusedDay = new Date();\n\n // Public Property API\n\n /* Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. /\n @Prop({ mutable: true }) selectedDate: string = '';\n\n /* Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property. /\n @Prop() min: string = '';\n\n /* Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property. /\n @Prop() max: string = '';\n\n /* Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday. /\n @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n /* Button labels, day names, month names, etc, used for localization.\n * Default is English. /\n @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n /* The color to use from the application's color palette. /\n @Prop() color?: Color;\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n * @returns `false` for not disabled and `true` for disabled\n /\n @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n /* Controls whether the picker is a modal or dialog,\n * popup control and will therefore keep focus within the control /\n @Prop() isModal: boolean = false;\n\n /* @internal First focusable element. Relevant for keeping focus within the control /\n @Prop() firstFocusEle: HTMLElement;\n\n // Events\n\n /* Event emitted when a date is selected. /\n @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n // Public methods API\n\n /* Focus to the calendar\n * @param day - focus to the current selected day\n * @param forceFocusVisible - force visible focus - required if opened via keyboad\n /\n @Method()\n async setFocus(day = false, forceFocusVisible = false) {\n this.setFocusedDay(parseISODate(this.selectedDate) \|\| new Date());\n\n if (day) {\n setTimeout((_) => this.focusedDayNode.focus(), 20);\n return;\n }\n clearTimeout(this.focusTimeoutId);\n this.focusTimeoutId = setTimeout(() => {\n if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n this.monthSelectNode.focus();\n }, 20);\n }\n\n @Watch('selectedDate')\n handleSelectedDateChange() {\n this.setFocus(true);\n }\n\n // Local methods.\n\n private enableActiveFocus = () => {\n this.activeFocus = true;\n };\n\n private disableActiveFocus = () => {\n this.activeFocus = false;\n };\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days));\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months);\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years);\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month);\n const max = endOfMonth(min);\n const date = setMonth(this.focusedDay, month);\n\n this.setFocusedDay(dateClamp(date, min, max));\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year);\n const max = endOfMonth(min);\n const date = setYear(this.focusedDay, year);\n\n this.setFocusedDay(dateClamp(date, min, max));\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = dateClamp(\n day,\n parseISODate(this.min),\n parseISODate(this.max)\n );\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchMove = (event: TouchEvent) => {\n event.preventDefault();\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n if (isHorizontalSwipe) {\n this.addMonths(distX < 0 ? 1 : -1);\n }\n\n this.initialTouchY = null;\n this.initialTouchX = null;\n };\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault();\n this.addMonths(1);\n };\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault();\n this.addMonths(-1);\n };\n\n private handleKeyboardNavigation = (event: KeyboardEvent) => {\n // handle tab separately, since it needs to be treated\n // differently to other keyboard interactions\n if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n event.preventDefault();\n const ele = this.firstFocusEle \|\| this.firstFocusableElement;\n ele.focus();\n return;\n }\n\n let handled = true;\n\n switch (event.key) {\n case 'ArrowRight':\n this.addDays(1);\n break;\n case 'ArrowLeft':\n this.addDays(-1);\n break;\n case 'ArrowDown':\n this.addDays(7);\n break;\n case 'ArrowUp':\n this.addDays(-7);\n break;\n case 'PageUp':\n if (event.shiftKey) {\n this.addYears(-1);\n } else {\n this.addMonths(-1);\n }\n break;\n case 'PageDown':\n if (event.shiftKey) {\n this.addYears(1);\n } else {\n this.addMonths(1);\n }\n break;\n case 'Home':\n this.startOfWeek();\n break;\n case 'End':\n this.endOfWeek();\n break;\n default:\n handled = false;\n }\n\n if (handled) {\n event.preventDefault();\n this.enableActiveFocus();\n }\n };\n\n private handleDaySelect = (_event: MouseEvent, day: Date) => {\n const isAllowed = !this.isDateDisabled(day);\n const isInRange = inRange(\n day,\n parseISODate(this.min),\n parseISODate(this.max)\n );\n\n if (!isInRange \|\| !isAllowed) {\n return;\n }\n\n if (day.getMonth() === this.focusedDay.getMonth()) {\n this.setValue(day);\n } else {\n this.setFocusedDay(day);\n }\n };\n\n private handleMonthSelect = (e) => {\n this.setMonth(parseInt(e.target.value, 10));\n };\n\n private handleYearSelect = (e) => {\n this.setYear(parseInt(e.target.value, 10));\n };\n\n private setValue(date: Date) {\n this.selectedDate = printISODate(date);\n this.nanoDatePicked.emit({\n value: this.selectedDate,\n valueAsDate: date,\n });\n }\n\n private processFocusedDayNode = (element: HTMLButtonElement) => {\n this.focusedDayNode = element;\n\n if (this.activeFocus) {\n setTimeout(() => element.focus(), 0);\n }\n };\n\n connectedCallback() {\n if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n }\n\n componentWillLoad() {\n this.handleSelectedDateChange();\n }\n\n componentDidLoad() {\n this.connectedCallback();\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.yearSelectNode);\n focusVisible.unobserve(this.monthSelectNode);\n }\n\n render() {\n const valueAsDate = parseISODate(this.selectedDate);\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear();\n const focusedMonth = this.focusedDay.getMonth();\n const focusedYear = this.focusedDay.getFullYear();\n\n const minDate = parseISODate(this.min);\n const maxDate = parseISODate(this.max);\n const prevMonthDisabled =\n minDate != null &&\n minDate.getMonth() === focusedMonth &&\n minDate.getFullYear() === focusedYear;\n const nextMonthDisabled =\n maxDate != null &&\n maxDate.getMonth() === focusedMonth &&\n maxDate.getFullYear() === focusedYear;\n\n let minYear = selectedYear - 10;\n let maxYear = selectedYear + 10;\n if (minDate) minYear = minDate.getFullYear();\n if (maxDate) maxYear = maxDate.getFullYear();\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-date-picker': true }}\n >\n <div class=\"duet-date\">\n <div\n class={{\n 'duet-date__dialog': true,\n 'is-active': true,\n }}\n onTouchMove={this.handleTouchMove}\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <div class=\"duet-date__dialog-content\">\n <div\n class=\"duet-date__vhidden duet-date__instructions\"\n aria-live=\"polite\"\n >\n {this.localization.keyboardInstruction}\n </div>\n {/\n With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n * here which is wrong for the TS types, but ends up with the correct event listener\n * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n */}\n <div\n class=\"duet-date__header\"\n onFocusin={this.disableActiveFocus}\n >\n <div>\n <h2\n id={this.dialogLabelId}\n class=\"duet-date__vhidden\"\n aria-live=\"polite\"\n >\n {this.localization.monthNames[focusedMonth]}{' '}\n {this.focusedDay.getFullYear()}\n </h2>\n <label\n htmlFor={this.monthSelectId}\n class=\"duet-date__vhidden\"\n >\n {this.localization.monthSelectLabel}\n </label>\n <div class=\"duet-date__select\">\n <select\n id={this.monthSelectId}\n class=\"duet-date__select--month\"\n ref={(element) =>\n (this.firstFocusableElement = this.monthSelectNode =\n element)\n }\n onChange={this.handleMonthSelect}\n >\n {this.localization.monthNames.map((month, i) => (\n <option\n key={month}\n value={i}\n selected={i === focusedMonth}\n disabled={\n !inRange(\n new Date(focusedYear, i, 1),\n minDate ? startOfMonth(minDate) : null,\n maxDate ? endOfMonth(maxDate) : null\n )\n }\n >\n {month}\n </option>\n ))}\n </select>\n <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n <span>\n {this.localization.monthNamesShort[focusedMonth]}\n </span>\n <nano-icon name=\"light/chevron-down\"></nano-icon>\n </div>\n </div>\n\n <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n {this.localization.yearSelectLabel}\n </label>\n <div class=\"duet-date__select\">\n <select\n id={this.yearSelectId}\n class=\"duet-date__select--year\"\n onChange={this.handleYearSelect}\n ref={(element) => (this.yearSelectNode = element)}\n >\n {range(minYear, maxYear).map((year) => (\n <option key={year} selected={year === focusedYear}>\n {year}\n </option>\n ))}\n </select>\n <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n <span>{this.focusedDay.getFullYear()}</span>\n <nano-icon name=\"light/chevron-down\" />\n </div>\n </div>\n </div>\n\n <div class=\"duet-date__nav\">\n <button\n class=\"duet-date__prev\"\n onClick={this.handlePreviousMonthClick}\n disabled={prevMonthDisabled}\n type=\"button\"\n >\n <nano-icon name=\"light/chevron-left\" />\n <span class=\"duet-date__vhidden\">\n {this.localization.prevMonthLabel}\n </span>\n </button>\n <button\n class=\"duet-date__next\"\n onClick={this.handleNextMonthClick}\n disabled={nextMonthDisabled}\n type=\"button\"\n >\n <nano-icon name=\"light/chevron-right\" />\n <span class=\"duet-date__vhidden\">\n {this.localization.nextMonthLabel}\n </span>\n </button>\n </div>\n </div>\n <div>\n <DatePickerMonth\n selectedDate={valueAsDate}\n focusedDate={this.focusedDay}\n onDateSelect={this.handleDaySelect}\n onKeyboardNavigation={this.handleKeyboardNavigation}\n labelledById={this.dialogLabelId}\n localization={this.localization}\n firstDayOfWeek={this.firstDayOfWeek}\n focusedDayRef={this.processFocusedDayNode}\n min={minDate}\n max={maxDate}\n isDateDisabled={this.isDateDisabled}\n />\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,10 +1,11 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, g as getElement, B as Build, h } from './index-3118109b.js';
+import { r as registerInstance, c as createEvent, g as getElement, B as Build, a as Host } from './index-6cc72cd9.js';
 import { d as displayTransition } from './transitions-c09bd7f6.js';
+import { h } from './renderer-4bc3e2dc.js';
-const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
+const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
 const NanoDetailsStyle0 = detailsCss;
 const Details = class {
@@ -166,15 +167,15 @@ const Details = class {
         }
     }
     render() {
-        return (h("details", { key: 'd029baacc6b25b275585fd110244292df8565113', part: "base", ref: (d) => (this.detailsEl = d), class: {
+        return (h(Host, { key: 'ee6fb3abfaf15e07a18d399514e8447d63512ce4', class: "nano-details" }, h("details", { key: '9478907ce6d6e8363c66df27e45e05a22705d38c', part: "base", ref: (d) => (this.detailsEl = d), class: {
                 details: true,
                 open: this.open,
                 disabled: this.disabled,
-            } }, h("summary", { key: 'b89dd13ee05417c6e6d10d74b0657908d0219032', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
+            } }, h("summary", { key: '717ed7a624692dfce885436025e45cd011d9af5a', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, 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", { key: '4f61a025fb297cb9211c7b2c34658b6cd696a12d', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
+            } }, h("slot", { name: "icon-start" }))) : (''), h("div", { key: '9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad', part: "label", class: "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", { key: 'c1febecba9cfe36955454d98e7b29449c7cf0324', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: '3fbfde1832791ad82d1992671f7abb7506e88d6c', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '1f21df1c212294735004d2e34abc19c554b617a1' })))));
+            } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { key: '89311fc1194ca178843b5b751c48740b26689eaa', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: 'b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '4735f3166e91d58152564a4f1b423e77900fd84f' }))))));
     }
     static get watchers() { return {
         "open": ["toggleClick"]

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

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

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

@@ -1,13 +1,14 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-3118109b.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
+import { h } from './renderer-4bc3e2dc.js';
 import { M as Modal } from './modal-02828a39.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-f373a189.js';
+import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-1afc6a4e.js';
 import { h as hasSlot } from './slot-1cd90e53.js';
-import { C as ComponentStore } from './component-store-b798181b.js';
+import { C as ComponentStore } from './component-store-199a9fd8.js';
 import './tabbable-44932eb7.js';
-import './dom-d7f9f24c.js';
+import './dom-fafdec9a.js';
 import './throttle-df960210.js';
 const dialogCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--close-button-color:#b5aea7;--width:60rem;--height:auto;--tint-color:#00607b;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--nano-layer-index-modal, 700);border:none;inline-size:unset;block-size:unset;color:unset;background-color:unset}.dialog::backdrop{display:none}.dialog__panel{display:flex;flex-direction:column;z-index:2;inline-size:var(--width);block-size:var(--height);max-inline-size:calc(100% - (var(--nano-spacing-xlarge, 24px) + var(--nano-scroll-lock-size)));max-block-size:calc(92vh - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);opacity:0;transform:scale(0.8);transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-block-start:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog--nodismiss .dialog__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}.dialog__header{flex:0 0 auto;display:flex;inline-size:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;transition:var(--nano-transition-fast, 0.1s) box-shadow;min-inline-size:auto}[stuck] .dialog__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding-block:var(--header-padding-v);padding-inline:var(--header-padding-h)}.dialog .dialog__close-icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding-block:0;padding-inline:var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding-block:0 var(--body-padding-v);padding-inline:var(--body-padding-h)}.dialog:not(.dialog--has-header) .dialog__body{padding-block-start:var(--body-padding-v)}.dialog__body ::slotted(*){max-inline-size:100%}.dialog__body-wrap{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-start-start-radius:0;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-start-start-radius:inherit;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:0}.dialog__footer{inline-size:100%;padding-block:var(--footer-padding-v);padding-inline:var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;inset-block-start:1px;min-inline-size:auto}.dialog__footer ::slotted(button){margin-inline-end:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);transition:box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;inset:0 !important;background-color:var(--scrim-color);opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";
@@ -220,14 +221,14 @@ const Dialog = class {
         this.panel.removeEventListener('transitionend', this.handleTransitionEnd);
     }
     render() {
-        return (h(Host, { key: '327adc7c947fac99e0a00e079ec558251d80a266' }, h("div", { key: '4e782b64be0681b785e589f5ae5b52a9e9bd2897', part: "base", class: {
+        return (h(Host, { key: 'ecd2ed516be353ff67709a8091bb4bf3efe6f250', class: "nano-dialog" }, h("div", { key: 'c461f3cb97b4bec6409eddf83934cba04d3f649d', part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
                 'dialog--has-footer': !this.noFooter,
                 'dialog--has-header': !this.noHeader,
                 'dialog--nodismiss': this.noDismiss,
                 'dialog--with-ribbon': this.showRibbon,
-            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: '4cfa8d6ff444bc20e42a0946bd5a516db2fa43d2', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '8e9593b9dcaa64414a6d1d9427e10c41015a5dcf', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: '562360b58859223f106716867976375b4b6b957c', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: 'd6087985bfded2e52ab6338735863db986ffe385' }, h("header", { key: 'efa2a403e7fb7b1c2a57a9dd898238b4429f7c84', part: "header", class: "dialog__header" }, h("span", { key: '6c9a2d665dfecb5ae3fc9093e6cb699201449fac', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'c5f6c366e8484f30dca2939cc0fc2febd9bfb752', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: '8bd420a022b705e6d1edbf612aba9b29d8f32ce6', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: '4dd4fb74f41493039cf35d75fb1d972d8499265c', part: "body", class: "dialog__body" }, h("slot", { key: 'b30cab20e47d601ea6263816efd9046300959ccd' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { key: 'b20eea7258ea5fdb63e3dc6f35dc696bd497774c', position: "bottom" }, h("footer", { key: '0bdbc42b440abf68fdb01630795bd869b804f71e', part: "footer", class: "dialog__footer" }, h("slot", { key: '1c4cdb096b7010830a35a166edf6844b732d36bb', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { key: '83e320d838a48a6c4bd38f55d8d367ea1a9bbf40', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
+            }, onKeyDown: this.handleKeyDown, ref: (ele) => (this.dialog = ele), popover: "manual" }, h("div", { key: 'e54d7cf6106039f4d6c19357576de9da241970ab', part: "overlay", class: "dialog__overlay", ref: (el) => (this.overlay = el), onClick: this.requestClose }), h("div", { key: '0e5faa8f6c97e584e1c3f2ffe079b7548466f5f1', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": !this.hidden ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: -1 }, h("div", { key: '3a51d64ddd77f662e2aaea65d5f7ddf0895fb334', class: "dialog__body-wrap" }, !this.noHeader && (h("nano-sticker", { key: '43e5d67892f8afeeef5d6528407888175fcedd64' }, h("header", { key: '229b41c3da0bdf7af0d2ff7670059d5213e80f6a', part: "header", class: "dialog__header" }, h("span", { key: '2432a5424e4307610d9ea546f9fd95010ea15f4f', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, h("slot", { key: 'fa310058f83f77addd68ebffe137dfe98dd21d02', name: "label" }, this.label || String.fromCharCode(65279))), !this.noUserDismiss && (h("nano-icon-button", { key: '628a2209cc13e3b2b97512debfa5c4495ab63ff3', part: "close-button", exportparts: "base:close-button__base", class: "dialog__close-icon", label: "close dialog", onClick: this.requestClose, iconName: "light/xmark" }))))), h("div", { key: '081b6c433700ebfdd17919f007a2a15dc48a9510', part: "body", class: "dialog__body" }, h("slot", { key: '704d5a44e1c47d7de9b67b5911bba385991e0c95' })), !this.noFooter && (this.hasFooter || !this.noUserDismiss) && (h("nano-sticker", { key: '908ca9562cd246cc520c396725b68026cd610a26', position: "bottom" }, h("footer", { key: '9c5c2a8e3c8851b729453a1ac1a35cfeac240302', part: "footer", class: "dialog__footer" }, h("slot", { key: 'e2b48e7a7ef217c06ee6600f8b2000e3a0906a38', name: "footer", onSlotchange: this.handleSlotChange }), !this.noUserDismiss && (h("button", { key: 'f99cee27f04c252ace3fb9f4305013f10cce07fc', class: "dialog__close-txt", onClick: this.requestClose }, "Close"))))))))));
     }
     static get watchers() { return {
         "open": ["handleOpenChange"],