@nanoporetech-digital/components 1.13.22 → 1.15.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-picker/duet-date-picker/date-utils.ts","src/components/date-picker/duet-date-picker/date-picker-day.tsx","src/components/date-picker/duet-date-picker/date-picker-month.tsx","src/components/date-picker/duet-date-picker/date-localization.ts","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","startOfWeek","firstDayOfWeek","Monday","day","getDay","diff","endOfWeek","startOfMonth","endOfMonth","inRange","min","max","clamp","time","getTime","getDaysInRange","start","end","current","push","getViewOfMonth","DatePickerDay","_a","focusedDay","today","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","isSelected","isToday","isFocused","isDisabled","isOutsideRange","handleClick","e","h","class","duet-date__day","is-outside","is-disabled","is-today","tabIndex","onClick","onKeyDown","type","aria-pressed","ref","el","aria-hidden","toLocaleDateString","undefined","month","chunk","array","chunkSize","result","i","length","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","DatePickerMonth","selectedDate","focusedDate","labelledById","localization","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","role","aria-labelledby","onFocusin","dayNames","dayName","scope","substr","week","aria-selected","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","datePickerCss","range","from","to","DatePicker","exports","class_1","hostRef","_this","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","activeFocus","defaultLocalization","isModal","enableActiveFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","ele","firstFocusEle","firstFocusableElement","focus","handled","addYears","handleDaySelect","_event","isAllowed","isInRange","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","prototype","setFocus","forceFocusVisible","clearTimeout","focusTimeoutId","focusVisible","force","monthSelectNode","handleSelectedDateChange","months","years","year","printISODate","nanoDatePicked","emit","valueAsDate","connectedCallback","yearSelectNode","observe","componentWillLoad","componentDidLoad","disconnectedCallback","unobserve","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","Host","Object","assign","createColorClasses","color","duet-date__dialog","is-active","onTouchMove","onTouchStart","onTouchEnd","aria-live","id","htmlFor","onChange","selected","name","dropdownCss","Dropdown","class_2","dropdownId","dropDownIds","labelId","ignoreOpenWatcher","menuFocused","autoOpen","open","closeOnSelect","tetherTo","placement","distance","skidding","hoist","togglePanel","hide","show","handleTriggerKeyDown","includes","stopPropagation","handleTriggerSlotChange","updateAccessibleTrigger","handleOpenChange","handleTetherToChange","createPopover","handlePopoverOptionsChange","popover","setOptions","strategy","menuFocus","ev","tagName","toLowerCase","secondaryOpen","detail","secondaryMenu","panel","classList","add","transitionDone","then","remove","style","minHeight","scrollHeight","secondaryClose","parentElement","handlePanelSelect","nanoShow","defaultPrevented","document","addEventListener","handleDocumentMouseDown","handleDocumentKeyDown","nanoHide","removeEventListener","getMenu","host","querySelector","accessibleTrigger","assignedElements","Array","querySelectorAll","getNearestTabbableElement","setAttribute","activeElement","closest","containingElement","menu","dispatchEvent","KeyboardEvent","destroy","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","bind","part","dropdown","dropdown--open","aria-expanded","aria-haspopup","onSlotchange","split","join","aria-modal","dialogTitle"],"mappings":"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","sourcesContent":["const ISO_DATE_FORMAT = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\n\nexport enum DaysOfWeek {\n  Sunday = 0,\n  Monday = 1,\n  Tuesday = 2,\n  Wednesday = 3,\n  Thursday = 4,\n  Friday = 5,\n  Saturday = 6,\n}\n\nexport function createDate(year: string, month: string, day: string): Date {\n  var dayInt = parseInt(day, 10);\n  var monthInt = parseInt(month, 10);\n  var yearInt = parseInt(year, 10);\n\n  const isValid =\n    Number.isInteger(yearInt) && // all parts should be integers\n    Number.isInteger(monthInt) &&\n    Number.isInteger(dayInt) &&\n    monthInt > 0 && // month must be 1-12\n    monthInt <= 12 &&\n    dayInt > 0 && // day must be 1-31\n    dayInt <= 31 &&\n    yearInt > 0;\n\n  if (isValid) {\n    return new Date(yearInt, monthInt - 1, dayInt);\n  }\n}\n\n/**\n * @param value date string in ISO format YYYY-MM-DD\n */\nexport function parseISODate(value: string): Date {\n  if (!value) {\n    return;\n  }\n\n  const matches = value.match(ISO_DATE_FORMAT);\n\n  if (matches) {\n    return createDate(matches[1], matches[2], matches[3]);\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return '';\n  }\n\n  var d = date.getDate().toString(10);\n  var m = (date.getMonth() + 1).toString(10);\n  var y = date.getFullYear().toString(10);\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`;\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`;\n  }\n\n  return `${y}-${m}-${d}`;\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false;\n  }\n\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date);\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date);\n  d.setMonth(date.getMonth() + months);\n  return d;\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date);\n  d.setFullYear(date.getFullYear() + years);\n  return d;\n}\n\nexport function startOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;\n\n  d.setDate(d.getDate() - diff);\n  return d;\n}\n\nexport function endOfWeek(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date {\n  var d = new Date(date);\n  var day = d.getDay();\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);\n\n  d.setDate(d.getDate() + diff);\n  return d;\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1);\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0);\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date);\n  d.setMonth(month);\n  return d;\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date);\n  d.setFullYear(year);\n  return d;\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date;\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime();\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min;\n  }\n\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max;\n  }\n\n  return date;\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = [];\n  let current = start;\n\n  while (!isEqual(current, end)) {\n    days.push(current);\n    current = addDays(current, 1);\n  }\n\n  days.push(current);\n\n  return days;\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(\n  date: Date,\n  firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);\n\n  return getDaysInRange(start, end);\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random().toString(16).slice(-4);\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\n}\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { isEqual } from './date-utils';\n\nexport type DatePickerDayProps = {\n  focusedDay: Date;\n  today: Date;\n  day: Date;\n  inRange: boolean;\n  disabled: boolean;\n  onDaySelect: (event: MouseEvent, day: Date) => void;\n  onKeyboardNavigation: (event: KeyboardEvent) => void;\n  focusedDayRef?: (element: HTMLButtonElement) => void;\n  isSelected;\n};\n\nexport const DatePickerDay: FunctionalComponent<DatePickerDayProps> = ({\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  inRange,\n  disabled,\n  isSelected,\n}) => {\n  const isToday = isEqual(day, today);\n  const isFocused = isEqual(day, focusedDay);\n  const isDisabled = day.getMonth() !== focusedDay.getMonth() || disabled;\n  const isOutsideRange = !inRange;\n\n  function handleClick(e) {\n    onDaySelect(e, day);\n  }\n\n  return (\n    <button\n      class={{\n        'duet-date__day': true,\n        'is-outside': isOutsideRange,\n        'is-disabled': isDisabled,\n        'is-today': isToday,\n      }}\n      tabIndex={isFocused ? 0 : -1}\n      onClick={handleClick}\n      onKeyDown={onKeyboardNavigation}\n      disabled={isOutsideRange}\n      type=\"button\"\n      aria-pressed={isSelected ? 'true' : 'false'}\n      ref={(el) => {\n        if (isFocused && el && focusedDayRef) {\n          focusedDayRef(el);\n        }\n      }}\n    >\n      <span aria-hidden=\"true\">{day.getDate()}</span>\n      <span class=\"duet-date__vhidden\">\n        {day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' })}\n      </span>\n    </button>\n  );\n};\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { DuetLocalizedText } from './date-localization';\nimport { DatePickerDay, DatePickerDayProps } from './date-picker-day';\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from './date-utils';\nimport { DateDisabledPredicate } from '../../../interface';\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n  const result = [];\n\n  for (let i = 0; i < array.length; i += chunkSize) {\n    result.push(array.slice(i, i + chunkSize));\n  }\n\n  return result;\n}\n\nfunction mapWithOffset<T, U>(\n  array: T[],\n  startingOffset: number,\n  mapFn: (item: T) => U\n): U[] {\n  return array.map((_, i) => {\n    const adjustedIndex = (i + startingOffset) % array.length;\n    return mapFn(array[adjustedIndex]);\n  });\n}\n\ntype DatePickerMonthProps = {\n  selectedDate: Date;\n  focusedDate: Date;\n  labelledById: string;\n  localization: DuetLocalizedText;\n  firstDayOfWeek: DaysOfWeek;\n  min?: Date;\n  max?: Date;\n  onDateSelect: DatePickerDayProps['onDaySelect'];\n  onKeyboardNavigation: DatePickerDayProps['onKeyboardNavigation'];\n  focusedDayRef: (element: HTMLButtonElement) => void;\n  onFocusIn?: (e: FocusEvent) => void;\n  onMouseDown?: (e: MouseEvent) => void;\n  isDateDisabled: DateDisabledPredicate;\n};\n\nexport const DatePickerMonth: FunctionalComponent<DatePickerMonthProps> = ({\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  onDateSelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  onMouseDown,\n  onFocusIn,\n  isDateDisabled,\n}) => {\n  const today = new Date();\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek);\n\n  return (\n    <table\n      class=\"duet-date__table\"\n      role=\"grid\"\n      aria-labelledby={labelledById}\n      // @ts-ignore\n      onFocusin={onFocusIn}\n      onMouseDown={onMouseDown}\n    >\n      <thead>\n        <tr>\n          {mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (\n            <th class=\"duet-date__table-header\" scope=\"col\">\n              <span aria-hidden=\"true\">{dayName.substr(0, 2)}</span>\n              <span class=\"duet-date__vhidden\">{dayName}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {chunk(days, 7).map((week) => (\n          <tr class=\"duet-date__row\">\n            {week.map((day) => (\n              <td\n                class=\"duet-date__cell\"\n                role=\"gridcell\"\n                aria-selected={isEqual(day, selectedDate) ? 'true' : undefined}\n              >\n                <DatePickerDay\n                  day={day}\n                  today={today}\n                  focusedDay={focusedDate}\n                  inRange={inRange(day, min, max)}\n                  onDaySelect={onDateSelect}\n                  onKeyboardNavigation={onKeyboardNavigation}\n                  focusedDayRef={focusedDayRef}\n                  disabled={isDateDisabled(day)}\n                  isSelected={isEqual(day, selectedDate)}\n                />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n","type MonthsNames = [\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string,\n  string\n];\ntype DayNames = [string, string, string, string, string, string, string];\n\nexport type DuetLocalizedText = {\n  buttonLabel: string;\n  placeholder: string;\n  selectedDateMessage: string;\n  prevMonthLabel: string;\n  nextMonthLabel: string;\n  monthSelectLabel: string;\n  yearSelectLabel: string;\n  closeLabel: string;\n  keyboardInstruction: string;\n  calendarHeading: string;\n  dayNames: DayNames;\n  monthNames: MonthsNames;\n  monthNamesShort: MonthsNames;\n};\n\nconst localization: DuetLocalizedText = {\n  buttonLabel: 'Choose date',\n  placeholder: 'YYYY-MM-DD',\n  selectedDateMessage: 'Selected date is',\n  prevMonthLabel: 'Previous month',\n  nextMonthLabel: 'Next month',\n  monthSelectLabel: 'Month',\n  yearSelectLabel: 'Year',\n  closeLabel: 'Close window',\n  keyboardInstruction: 'You can use arrow keys to navigate dates',\n  calendarHeading: 'Choose a date',\n  dayNames: [\n    'Sunday',\n    'Monday',\n    'Tuesday',\n    'Wednesday',\n    'Thursday',\n    'Friday',\n    'Saturday',\n  ],\n  monthNames: [\n    'January',\n    'February',\n    'March',\n    'April',\n    'May',\n    'June',\n    'July',\n    'August',\n    'September',\n    'October',\n    'November',\n    'December',\n  ],\n  monthNamesShort: [\n    'Jan',\n    'Feb',\n    'Mar',\n    'Apr',\n    'May',\n    'Jun',\n    'Jul',\n    'Aug',\n    'Sep',\n    'Oct',\n    'Nov',\n    'Dec',\n  ],\n};\n\nexport default localization;\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --background: defaults to #{$layer-bg-color}\n   * @prop --active-color: defaults to var(--nano-color-base, #{nano-color(primary,base)})\n   * @prop --active-text-color: defaults to  var(--nano-color-contrast, #{nano-color(primary, contrast)})\n   * @prop --focus-shadow: defaults to  #{$control-focus-style}\n   * @prop --inactive-color: defaults to #{$button-bg-color}\n   */\n\n  --background: #{$layer-bg-color};\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --focus-shadow: #{$control-focus-style};\n  --inactive-color: #{$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\n\n:host(.nano-color) {\n  --active-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --active-text-color: #{current-color(contrast)};\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER\n// ---------------------------------------------\n\n.duet-date *,\n.duet-date *::before,\n.duet-date *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n\n.duet-date {\n  box-sizing: border-box;\n  color: currentColor;\n  display: block;\n  margin: 0;\n  position: relative;\n  text-align: left;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ DIALOG\n// ---------------------------------------------\n\n.duet-date__dialog {\n  display: flex;\n  top: 100%;\n  max-width: 100%;\n  width: 100%;\n\n  &.is-left {\n    left: auto;\n    right: 0;\n    width: auto;\n  }\n}\n\n.duet-date__dialog-content {\n  background: var(--background);\n  min-width: 290px;\n  padding: 16px 16px 20px;\n  position: relative;\n  transform: none;\n  max-width: 100%;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ TABLE\n// ---------------------------------------------\n\n.duet-date__table {\n  border-collapse: collapse;\n  border-spacing: 0;\n  font-size: 1em;\n  line-height: 1.25;\n  text-align: center;\n  width: 100%;\n}\n\n.duet-date__table-header {\n  font-size: 0.75em;\n  font-weight: 600;\n  letter-spacing: 1px;\n  line-height: 1.25;\n  padding-bottom: 8px;\n  text-decoration: none;\n  text-transform: uppercase;\n}\n\n.duet-date__cell {\n  text-align: center;\n}\n\n.duet-date__day {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-block;\n  font-size: 0.875em;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.25;\n  position: relative;\n  text-align: center;\n  vertical-align: middle;\n  z-index: 1;\n  transition: 0.15s ease all;\n  height: 2.5em;\n  width: 2.5em;\n\n  &.is-today {\n    box-shadow: 0 0 0 1px var(--active-color);\n    position: relative;\n  }\n\n  &:hover::before,\n  &.is-today::before {\n    content: '';\n    background: var(--active-color);\n    border-radius: 50%;\n    bottom: 0;\n    left: 0;\n    opacity: 0.16;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n\n  [aria-selected='true'] & {\n    background: var(--active-color);\n    color: var(--active-text-color);\n    box-shadow: none;\n    outline: 0;\n  }\n\n  &:active {\n    background: var(--active-color);\n    box-shadow: var(--focus-shadow);\n    color: var(--active-text-color);\n  }\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &.is-disabled {\n    background: transparent;\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.5;\n\n    &::before {\n      display: none;\n    }\n  }\n\n  &.is-outside {\n    background: var(--inactive-color);\n    box-shadow: none;\n    cursor: default;\n    opacity: 0.6;\n    pointer-events: none;\n\n    &::before {\n      display: none;\n    }\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ HEADER\n// ---------------------------------------------\n\n.duet-date__header {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  width: 100%;\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ NAVIGATION\n// ---------------------------------------------\n\n.duet-date__nav {\n  white-space: nowrap;\n}\n\n.duet-date__prev,\n.duet-date__next {\n  background: var(--inactive-color);\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  align-items: center;\n  appearance: none;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: inline-flex;\n  justify-content: space-around;\n  margin-left: 8px;\n  padding: 0;\n  transition: background-color 300ms ease;\n  font-size: 0.9em;\n  height: 2.2em;\n  width: 2.2em;\n\n  &:focus {\n    box-shadow: var(--focus-shadow);\n    outline: 0;\n  }\n\n  &:active:focus {\n    box-shadow: none;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n\n  nano-icon {\n    margin: 0 auto;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ SELECT\n// ---------------------------------------------\n\n.duet-date__select {\n  display: inline-flex;\n  margin-top: 4px;\n  position: relative;\n\n  span {\n    @include margin(null, 4px, null, null);\n  }\n\n  select {\n    cursor: pointer;\n    font-size: 1em;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 2;\n\n    &.focus-visible:focus + .duet-date__select-label {\n      box-shadow: var(--focus-shadow);\n    }\n  }\n}\n\n.duet-date__select-label {\n  align-items: center;\n  border-radius: 4px;\n  display: flex;\n  font-size: 1.25em;\n  font-weight: 600;\n  line-height: 1.25;\n  padding: 0 4px 0 8px;\n  pointer-events: none;\n  position: relative;\n  width: 100%;\n  z-index: 1;\n\n  nano-icon {\n    font-size: 0.55em;\n  }\n}\n\n// ---------------------------------------------\n// DUET DATE PICKER __ VISUALLY HIDDEN\n// ---------------------------------------------\n\n.duet-date__vhidden {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 1px;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from '@stencil/core';\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  clamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  createIdentifier,\n  DaysOfWeek,\n} from '../../utils/date-utils';\nimport { DatePickerMonth } from './duet-date-picker/date-picker-month';\nimport defaultLocalization from './duet-date-picker/date-localization';\n\nimport {\n  PickerChangeEvent,\n  DuetLocalizedText,\n  DateDisabledPredicate,\n  Color,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nfunction range(from: number, to: number) {\n  var result: number[] = [];\n  for (var i = from; i <= to; i++) {\n    result.push(i);\n  }\n  return result;\n}\n\n/**\n * A highly performant, small and accessible date-picker.\n * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).\n */\n@Component({\n  tag: 'nano-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements ComponentInterface {\n  private monthSelectId = createIdentifier('NanoDateMonth');\n  private yearSelectId = createIdentifier('NanoDateYear');\n  private dialogLabelId = createIdentifier('NanoDateLabel');\n\n  private firstFocusableElement: HTMLElement;\n  private monthSelectNode: HTMLElement;\n  private yearSelectNode: HTMLElement;\n  private focusedDayNode: HTMLButtonElement;\n\n  private focusTimeoutId: ReturnType<typeof setTimeout>;\n\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  @Element() host: HTMLNanoDatePickerElement;\n\n  @State() activeFocus = false;\n  @State() focusedDay = new Date();\n\n  // Public Property API\n\n  /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */\n  @Prop({ mutable: true }) selectedDate: string = '';\n\n  /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property. */\n  @Prop() min: string = '';\n\n  /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property. */\n  @Prop() max: string = '';\n\n  /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday. */\n  @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday;\n\n  /** Button labels, day names, month names, etc, used for localization.\n   * Default is English. */\n  @Prop() localization: DuetLocalizedText = defaultLocalization;\n\n  /** The color to use from the application's color palette. */\n  @Prop() color?: Color;\n\n  /** Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends. */\n  @Prop() isDateDisabled: DateDisabledPredicate = () => false;\n\n  /** Controls whether the picker is a modal or dialog,\n   * popup control and will therefore keep focus within the control */\n  @Prop() isModal: boolean = false;\n\n  /** @internal First focusable element. Relevant for keeping focus within the control */\n  @Prop() firstFocusEle: HTMLElement;\n\n  // Events\n\n  /** Event emitted when a date is selected. */\n  @Event() nanoDatePicked: EventEmitter<PickerChangeEvent>;\n\n  // Public methods API\n\n  /** Focus to the calendar\n   * @param day - focus to the current selected day\n   * @param forceFocusVisible - force visible focus - required if opened via keyboad\n   */\n  @Method()\n  async setFocus(day = false, forceFocusVisible = false) {\n    this.setFocusedDay(parseISODate(this.selectedDate) || new Date());\n\n    if (day) {\n      setTimeout((_) => this.focusedDayNode.focus(), 20);\n      return;\n    }\n    clearTimeout(this.focusTimeoutId);\n    this.focusTimeoutId = setTimeout(() => {\n      if (forceFocusVisible) focusVisible.force(this.monthSelectNode);\n      this.monthSelectNode.focus();\n    }, 20);\n  }\n\n  @Watch('selectedDate')\n  handleSelectedDateChange() {\n    this.setFocus(true);\n  }\n\n  // Local methods.\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true;\n  };\n\n  private disableActiveFocus = () => {\n    this.activeFocus = false;\n  };\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days));\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months);\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years);\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month);\n    const max = endOfMonth(min);\n    const date = setMonth(this.focusedDay, month);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year);\n    const max = endOfMonth(min);\n    const date = setYear(this.focusedDay, year);\n\n    this.setFocusedDay(clamp(date, min, max));\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchMove = (event: TouchEvent) => {\n    event.preventDefault();\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n    const threshold = 70;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n    if (isHorizontalSwipe) {\n      this.addMonths(distX < 0 ? 1 : -1);\n    }\n\n    this.initialTouchY = null;\n    this.initialTouchX = null;\n  };\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(1);\n  };\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault();\n    this.addMonths(-1);\n  };\n\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\n    // handle tab separately, since it needs to be treated\n    // differently to other keyboard interactions\n    if (event.key === 'Tab' && !event.shiftKey && this.isModal) {\n      event.preventDefault();\n      let ele = this.firstFocusEle || this.firstFocusableElement;\n      ele.focus();\n      return;\n    }\n\n    var handled = true;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        this.addDays(1);\n        break;\n      case 'ArrowLeft':\n        this.addDays(-1);\n        break;\n      case 'ArrowDown':\n        this.addDays(7);\n        break;\n      case 'ArrowUp':\n        this.addDays(-7);\n        break;\n      case 'PageUp':\n        if (event.shiftKey) {\n          this.addYears(-1);\n        } else {\n          this.addMonths(-1);\n        }\n        break;\n      case 'PageDown':\n        if (event.shiftKey) {\n          this.addYears(1);\n        } else {\n          this.addMonths(1);\n        }\n        break;\n      case 'Home':\n        this.startOfWeek();\n        break;\n      case 'End':\n        this.endOfWeek();\n        break;\n      default:\n        handled = false;\n    }\n\n    if (handled) {\n      event.preventDefault();\n      this.enableActiveFocus();\n    }\n  };\n\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\n    const isAllowed = !this.isDateDisabled(day);\n    const isInRange = inRange(\n      day,\n      parseISODate(this.min),\n      parseISODate(this.max)\n    );\n\n    if (!isInRange || !isAllowed) {\n      return;\n    }\n\n    if (day.getMonth() === this.focusedDay.getMonth()) {\n      this.setValue(day);\n    } else {\n      this.setFocusedDay(day);\n    }\n  };\n\n  private handleMonthSelect = (e) => {\n    this.setMonth(parseInt(e.target.value, 10));\n  };\n\n  private handleYearSelect = (e) => {\n    this.setYear(parseInt(e.target.value, 10));\n  };\n\n  private setValue(date: Date) {\n    this.selectedDate = printISODate(date);\n    this.nanoDatePicked.emit({\n      value: this.selectedDate,\n      valueAsDate: date,\n    });\n  }\n\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\n    this.focusedDayNode = element;\n\n    if (this.activeFocus) {\n      setTimeout(() => element.focus(), 0);\n    }\n  };\n\n  connectedCallback() {\n    if (this.yearSelectNode) focusVisible.observe(this.yearSelectNode);\n    if (this.monthSelectNode) focusVisible.observe(this.monthSelectNode);\n  }\n\n  componentWillLoad() {\n    this.handleSelectedDateChange();\n  }\n\n  componentDidLoad() {\n    this.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.yearSelectNode);\n    focusVisible.unobserve(this.monthSelectNode);\n  }\n\n  render() {\n    const valueAsDate = parseISODate(this.selectedDate);\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();\n    const focusedMonth = this.focusedDay.getMonth();\n    const focusedYear = this.focusedDay.getFullYear();\n\n    const minDate = parseISODate(this.min);\n    const maxDate = parseISODate(this.max);\n    const prevMonthDisabled =\n      minDate != null &&\n      minDate.getMonth() === focusedMonth &&\n      minDate.getFullYear() === focusedYear;\n    const nextMonthDisabled =\n      maxDate != null &&\n      maxDate.getMonth() === focusedMonth &&\n      maxDate.getFullYear() === focusedYear;\n\n    let minYear = selectedYear - 10;\n    let maxYear = selectedYear + 10;\n    if (minDate) minYear = minDate.getFullYear();\n    if (maxDate) maxYear = maxDate.getFullYear();\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"duet-date\">\n          <div\n            class={{\n              'duet-date__dialog': true,\n              'is-active': true,\n            }}\n            onTouchMove={this.handleTouchMove}\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <div class=\"duet-date__dialog-content\">\n              <div\n                class=\"duet-date__vhidden duet-date__instructions\"\n                aria-live=\"polite\"\n              >\n                {this.localization.keyboardInstruction}\n              </div>\n              {/**\n               * With onFocusIn, which is what TS types expect, Stencil ends up listening to a\n               * focusIn event, which is wrong as it needs to be focusin. So we had to use onFocusin\n               * here which is wrong for the TS types, but ends up with the correct event listener\n               * in Stencil. See issue: https://github.com/ionic-team/stencil/issues/2628\n               */}\n              {/* @ts-ignore */}\n              <div\n                class=\"duet-date__header\"\n                onFocusin={this.disableActiveFocus}\n              >\n                <div>\n                  <h2\n                    id={this.dialogLabelId}\n                    class=\"duet-date__vhidden\"\n                    aria-live=\"polite\"\n                  >\n                    {this.localization.monthNames[focusedMonth]}{' '}\n                    {this.focusedDay.getFullYear()}\n                  </h2>\n                  <label\n                    htmlFor={this.monthSelectId}\n                    class=\"duet-date__vhidden\"\n                  >\n                    {this.localization.monthSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.monthSelectId}\n                      class=\"duet-date__select--month\"\n                      ref={(element) =>\n                        (this.firstFocusableElement = this.monthSelectNode =\n                          element)\n                      }\n                      onChange={this.handleMonthSelect}\n                    >\n                      {this.localization.monthNames.map((month, i) => (\n                        <option\n                          key={month}\n                          value={i}\n                          selected={i === focusedMonth}\n                          disabled={\n                            !inRange(\n                              new Date(focusedYear, i, 1),\n                              minDate ? startOfMonth(minDate) : null,\n                              maxDate ? endOfMonth(maxDate) : null\n                            )\n                          }\n                        >\n                          {month}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>\n                        {this.localization.monthNamesShort[focusedMonth]}\n                      </span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n\n                  <label htmlFor={this.yearSelectId} class=\"duet-date__vhidden\">\n                    {this.localization.yearSelectLabel}\n                  </label>\n                  <div class=\"duet-date__select\">\n                    <select\n                      id={this.yearSelectId}\n                      class=\"duet-date__select--year\"\n                      onChange={this.handleYearSelect}\n                      ref={(element) => (this.yearSelectNode = element)}\n                    >\n                      {range(minYear, maxYear).map((year) => (\n                        <option key={year} selected={year === focusedYear}>\n                          {year}\n                        </option>\n                      ))}\n                    </select>\n                    <div class=\"duet-date__select-label\" aria-hidden=\"true\">\n                      <span>{this.focusedDay.getFullYear()}</span>\n                      <nano-icon name=\"light/chevron-down\"></nano-icon>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"duet-date__nav\">\n                  <button\n                    class=\"duet-date__prev\"\n                    onClick={this.handlePreviousMonthClick}\n                    disabled={prevMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-left\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.prevMonthLabel}\n                    </span>\n                  </button>\n                  <button\n                    class=\"duet-date__next\"\n                    onClick={this.handleNextMonthClick}\n                    disabled={nextMonthDisabled}\n                    type=\"button\"\n                  >\n                    <nano-icon name=\"light/chevron-right\"></nano-icon>\n                    <span class=\"duet-date__vhidden\">\n                      {this.localization.nextMonthLabel}\n                    </span>\n                  </button>\n                </div>\n              </div>\n              <div>\n                <DatePickerMonth\n                  selectedDate={valueAsDate}\n                  focusedDate={this.focusedDay}\n                  onDateSelect={this.handleDaySelect}\n                  onKeyboardNavigation={this.handleKeyboardNavigation}\n                  labelledById={this.dialogLabelId}\n                  localization={this.localization}\n                  firstDayOfWeek={this.firstDayOfWeek}\n                  focusedDayRef={this.processFocusedDayNode}\n                  min={minDate}\n                  max={maxDate}\n                  isDateDisabled={this.isDateDisabled}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{$layer-border-style}\n   * @prop --border-radius: Defaults to #{$layer-bg-color};\n   * @prop --background: Defaults to #{$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   */\n\n  --width: auto;\n  --border: #{$layer-border-style};\n  --border-radius: #{$layer-border-radius};\n  --background: #{$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: hidden;\n  --dropdown-z-index: #{$layer-index-dropdown};\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n\n    @media (max-width: 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    width: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentColor;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;\n    min-height: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-height: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  Watch,\n  h,\n  Listen,\n  ComponentInterface,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { transitionDone } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (works well with nano-nav-items).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private menuFocused: boolean = false;\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.ignoreOpenWatcher) {\n      this.open ? this.show() : this.hide();\n      this.updateAccessibleTrigger();\n    }\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoFocus')\n  menuFocus(ev: CustomEvent) {\n    let target = ev.target as HTMLElement;\n    if (\n      !target ||\n      !target.tagName ||\n      target.tagName.toLowerCase() !== 'nano-menu'\n    )\n      return;\n    this.menuFocused = true;\n  }\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    transitionDone(this.panel).then(() =>\n      this.panel.classList.remove('loading')\n    );\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    this.popover.show();\n    this.ignoreOpenWatcher = false;\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    this.menuFocused = false;\n  }\n\n  // Private methods\n\n  private getMenu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    this.open ? this.hide() : this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    let accessibleTrigger: HTMLElement;\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = this.tetherTo;\n    }\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    const menu = this.getMenu();\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      if (!this.open || this.menuFocused) return;\n      event.preventDefault();\n      menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    if (menu && event.target !== menu) {\n      menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    // Close when clicking outside of the close element\n    if (\n      target.closest(this.containingElement.tagName.toLowerCase()) !==\n      this.containingElement\n    ) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n    this.handlePanelSelect = this.handlePanelSelect.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.createPopover();\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        id={this.dropdownId}\n        class={{\n          dropdown: true,\n          'dropdown--open': this.open,\n        }}\n        aria-expanded={this.open ? 'true' : 'false'}\n        aria-haspopup=\"true\"\n      >\n        <span\n          part=\"trigger\"\n          class=\"dropdown__trigger\"\n          ref={(el) => (this.trigger = el)}\n          onKeyDown={this.handleTriggerKeyDown}\n          onClick={this.togglePanel}\n        >\n          <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n        </span>\n\n        <div ref={(el) => (this.positioner = el)} class=\"dropdown__positioner\">\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n            aria-hidden={!this.open}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n          >\n            {this.dialogTitle && (\n              <h2\n                id={this.labelId}\n                class=\"dropdown__accessible-title\"\n                aria-live=\"polite\"\n              >\n                {this.dialogTitle}\n              </h2>\n            )}\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nlet dropDownIds = 0;\n"]}

package/dist/nano-components/{p-507490fc.system.entry.js → p-f27c9429.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(r,n,e,a){function t(r){return r instanceof e?r:new e((function(n){n(r)}))}return new(e||(e=Promise))((function(e,o){function i(r){try{c(a.next(r))}catch(n){o(n)}}function s(r){try{c(a["throw"](r))}catch(n){o(n)}}function c(r){r.done?e(r.value):t(r.value).then(i,s)}c((a=a.apply(r,n||[])).next())}))};var __generator=this&&this.__generator||function(r,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,t,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(r){return function(n){return c([r,n])}}function c(i){if(a)throw new TypeError("Generator is already executing.");while(e)try{if(a=1,t&&(o=i[0]&2?t["return"]:i[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,i[1])).done)return o;if(t=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;t=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){e.label=i[1];break}if(i[0]===6&&e.label<o[1]){e.label=o[1];o=i;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(i);break}if(o[2])e.ops.pop();e.trys.pop();continue}i=n.call(r,e)}catch(s){i=[6,s];t=0}finally{a=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-89a5c54a.system.js","./p-a057ad2d.system.js","./p-22b50344.system.js"],(function(r,n){"use strict";var e,a,t,o,i,s,c,b,l;return{setters:[function(r){e=r.r;a=r.c;t=r.h;o=r.e;i=r.g},function(r){s=r.c;c=r.a},function(r){b=r.c},function(r){l=r.a}],execute:function(){var d='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #0084a9);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #0084a9);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var g=r("nano_range",function(){function r(r){var n=this;e(this,r);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return s(n.min,r,n.max)};this.ensureValueInBounds=function(r){if(n.dualKnobs){return{lower:n.clampBounds(r.lower),upper:n.clampBounds(r.upper)}}else{return n.clampBounds(r)}};this.handleKeyboard=function(r,e){var a=n.step;a=a>0?a:1;a=a/(n.max-n.min);if(!e){a*=-1}if(r==="A"){n.ratioA=s(0,n.ratioA+a,1)}else{n.ratioB=s(0,n.ratioB+a,1)}n.updateValue()};this.onBlur=function(){if(n.hasFocus){n.hasFocus=false;n.nanoBlur.emit();n.emitStyle()}};this.onFocus=function(){if(!n.hasFocus){n.hasFocus=true;n.nanoFocus.emit();n.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=l(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var a=this;return __generator(this,(function(t){switch(t.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,n.import("./p-979116ca.system.js")];case 1:e.gesture=t.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return a.onStart(r)},onMove:function(r){return a.onMove(r)},onEnd:function(r){return a.onEnd(r)}});this.gesture.enable(!this.disabled);t.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var n=this.rect=this.rangeSlider.getBoundingClientRect();var e=r.currentX;var a=s(0,(e-n.left)/n.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var n=this.rect;var e=s(0,(r-n.left)/n.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=p(h(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return h(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return h(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var n=this,e=n.min,a=n.max;if(this.dualKnobs){this.ratioA=p(r.lower,e,a);this.ratioB=p(r.upper,e,a)}else{this.ratioA=p(r,e,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,n=r.valA,e=r.valB;this.value=!this.dualKnobs?n:{lower:Math.min(n,e),upper:Math.max(n,e)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var n=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(n){n.focus()}}};r.prototype.render=function(){var r;var n=this;var e=this,a=e.min,i=e.max,s=e.step,l=e.el,d=e.handleKeyboard,g=e.pressedKnob,h=e.disabled,f=e.pin,m=e.ratioLower,v=e.ratioUpper;var k=m*100+"%";var w=100-v*100+"%";var y=document;var x=y.dir==="rtl";var z=x?"right":"left";var B=x?"left":"right";var A=function(r){var n;return n={},n[z]=r[z],n};var C=(r={},r[z]=k,r[B]=w,r);var K=[];if(this.snaps&&this.ticks){for(var S=a;S<=i;S+=s){var F=p(S,a,i);var j={ratio:F,active:F>=m&&F<=v};j[z]=F*100+"%";K.push(j)}}c(true,l,this.name,JSON.stringify(this.getValue()),h);return t(o,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:b(this.color,{"range-disabled":h,"range-pressed":g!==undefined,"range-has-pin":f,"range-snaps":this.snaps})},t("div",{class:"range-wrap"},t("slot",{name:"start"}),t("div",{class:"range-slider",ref:function(r){return n.rangeSlider=r}},K.map((function(r){return t("span",{style:A(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),t("div",{class:"range-bar",role:"presentation",part:"bar"}),t("div",{class:"range-bar range-bar-active",role:"presentation",style:C,part:"bar-active"}),u(x,{knob:"A",pressed:g==="A",value:this.valA,ratio:this.ratioA,pin:f,disabled:h,handleKeyboard:d,min:a,max:i}),this.dualKnobs&&u(x,{knob:"B",pressed:g==="B",value:this.valB,ratio:this.ratioB,pin:f,disabled:h,handleKeyboard:d,min:a,max:i})),t("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}());var u=function(r,n){var e=n.knob,a=n.value,o=n.ratio,i=n.min,s=n.max,c=n.disabled,b=n.pressed,l=n.pin,d=n.handleKeyboard;var g=r?"right":"left";var u=function(){var r={};r[g]=o*100+"%";return r};return t("div",{onKeyDown:function(r){var n=r.key;if(n==="ArrowLeft"||n==="ArrowDown"){d(e,false);r.preventDefault();r.stopPropagation()}else if(n==="ArrowRight"||n==="ArrowUp"){d(e,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":e==="A","range-knob-b":e==="B","range-knob-pressed":b,"range-knob-min":a===i,"range-knob-max":a===s},style:u(),role:"slider",tabindex:c?-1:0,"aria-valuemin":i,"aria-valuemax":s,"aria-disabled":c?"true":null,"aria-valuenow":a},l&&t("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),t("div",{class:"range-knob",role:"presentation",part:"knob"}))};var h=function(r,n,e,a){var t=(e-n)*r;if(a>0){t=Math.round(t/a)*a+n}return s(n,t,e)};var p=function(r,n,e){return s(0,(r-n)/(e-n),1)};g.style=d}}}));
-//# sourceMappingURL=p-507490fc.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(r,n,e,a){function t(r){return r instanceof e?r:new e((function(n){n(r)}))}return new(e||(e=Promise))((function(e,o){function i(r){try{c(a.next(r))}catch(n){o(n)}}function s(r){try{c(a["throw"](r))}catch(n){o(n)}}function c(r){r.done?e(r.value):t(r.value).then(i,s)}c((a=a.apply(r,n||[])).next())}))};var __generator=this&&this.__generator||function(r,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,t,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(r){return function(n){return c([r,n])}}function c(i){if(a)throw new TypeError("Generator is already executing.");while(e)try{if(a=1,t&&(o=i[0]&2?t["return"]:i[0]?t["throw"]||((o=t["return"])&&o.call(t),0):t.next)&&!(o=o.call(t,i[1])).done)return o;if(t=0,o)i=[i[0]&2,o.value];switch(i[0]){case 0:case 1:o=i;break;case 4:e.label++;return{value:i[1],done:false};case 5:e.label++;t=i[1];i=[0];continue;case 7:i=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(i[0]===6||i[0]===2)){e=0;continue}if(i[0]===3&&(!o||i[1]>o[0]&&i[1]<o[3])){e.label=i[1];break}if(i[0]===6&&e.label<o[1]){e.label=o[1];o=i;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(i);break}if(o[2])e.ops.pop();e.trys.pop();continue}i=n.call(r,e)}catch(s){i=[6,s];t=0}finally{a=o=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-af9f6453.system.js","./p-94f03788.system.js","./p-a057ad2d.system.js","./p-22b50344.system.js"],(function(r,n){"use strict";var e,a,t,o,i,s,c,b,l;return{setters:[function(r){e=r.r;a=r.c;t=r.h;o=r.e;i=r.g},function(r){s=r.c;c=r.a},function(r){b=r.c},function(r){l=r.a}],execute:function(){var g='.sc-nano-range-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165, 165, 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:3;-ms-flex:3;flex:3;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}.range-slider.sc-nano-range{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:-webkit-grab;cursor:grab;-ms-touch-action:pan-y;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:-webkit-grabbing;cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-bar[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-snaps.sc-nano-range-h .range-bar[dir=rtl].sc-nano-range{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-bar[dir=rtl].sc-nano-range{left:unset}.range-bar-active.sc-nano-range{bottom:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);-webkit-box-shadow:var(--knob-box-shadow);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;-webkit-transform:scale(0.67);transform:scale(0.67);-webkit-transition-duration:120ms;transition-duration:120ms;-webkit-transition-property:background-color, border, -webkit-transform;transition-property:background-color, border, -webkit-transform;transition-property:transform, background-color, border;transition-property:transform, background-color, border, -webkit-transform;-webkit-transition-timing-function:ease;transition-timing-function:ease}.range-knob[dir=rtl].sc-nano-range{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}.range-knob[dir=rtl].sc-nano-range{left:unset}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{-webkit-transform:scale(1);transform:scale(1)}.range-knob-handle.sc-nano-range{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle[dir=rtl].sc-nano-range{left:unset;right:unset;right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.range-knob-handle.sc-nano-range{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}.range-knob-handle[dir=rtl].sc-nano-range{left:unset}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), var(--focus-style);box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick.sc-nano-range:first-of-type[dir=rtl]{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type{border-top-left-radius:0;border-top-right-radius:var(--bar-border-radius);border-bottom-right-radius:var(--bar-border-radius);border-bottom-left-radius:0}.range-tick.sc-nano-range:last-of-type[dir=rtl]{border-top-left-radius:var(--bar-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--bar-border-radius)}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{-webkit-transform:translate3d(0, 0, 0) scale(0.01);transform:translate3d(0, 0, 0) scale(0.01);-webkit-transform-origin:center top;transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;-webkit-transition:background 120ms ease, -webkit-transform 120ms ease;transition:background 120ms ease, -webkit-transform 120ms ease;transition:transform 120ms ease, background 120ms ease;transition:transform 120ms ease, background 120ms ease, -webkit-transform 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{left:50%;top:0.25em;margin-left:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:background 120ms ease;transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-pin.sc-nano-range::before[dir=rtl]{left:unset;right:unset;right:50%}.range-pin.sc-nano-range::before[dir=rtl]{left:unset}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{-webkit-transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, -50%, 0) scale(1);-webkit-transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{-webkit-transform:scale(0.55);transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgba(var(--nano-color-base-rgb), 0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{-webkit-box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56);box-shadow:var(--knob-box-shadow), 0 0 0 5px rgba(var(--nano-color-tint-rgb), 0.56)}';var u=r("nano_range",function(){function r(r){var n=this;e(this,r);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.ratioA=0;this.ratioB=0;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0;this.clampBounds=function(r){return s(n.min,r,n.max)};this.ensureValueInBounds=function(r){if(n.dualKnobs){return{lower:n.clampBounds(r.lower),upper:n.clampBounds(r.upper)}}else{return n.clampBounds(r)}};this.handleKeyboard=function(r,e){var a=n.step;a=a>0?a:1;a=a/(n.max-n.min);if(!e){a*=-1}if(r==="A"){n.ratioA=s(0,n.ratioA+a,1)}else{n.ratioB=s(0,n.ratioB+a,1)}n.updateValue()};this.onBlur=function(){if(n.hasFocus){n.hasFocus=false;n.nanoBlur.emit();n.emitStyle()}};this.onFocus=function(){if(!n.hasFocus){n.hasFocus=true;n.nanoFocus.emit();n.emitStyle()}}}r.prototype.debounceChanged=function(){this.nanoChange=l(this.nanoChange,this.debounce)};r.prototype.minChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.maxChanged=function(){if(!this.noUpdate){this.updateRatio()}};r.prototype.disabledChanged=function(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()};r.prototype.valueChanged=function(r){if(!this.noUpdate){this.updateRatio()}r=this.ensureValueInBounds(r);this.nanoChange.emit({value:r})};r.prototype.connectedCallback=function(){this.updateRatio();this.debounceChanged();this.disabledChanged()};r.prototype.disconnectedCallback=function(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}};r.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var r,e;var a=this;return __generator(this,(function(t){switch(t.label){case 0:r=this.rangeSlider;if(!r)return[3,2];e=this;return[4,n.import("./p-979116ca.system.js")];case 1:e.gesture=t.sent().createGesture({el:r,gestureName:"range",gesturePriority:100,threshold:0,onStart:function(r){return a.onStart(r)},onMove:function(r){return a.onMove(r)},onEnd:function(r){return a.onEnd(r)}});this.gesture.enable(!this.disabled);t.label=2;case 2:return[2]}}))}))};r.prototype.getValue=function(){var r=this.value||0;if(this.dualKnobs){if(typeof r==="object"){return r}return{lower:0,upper:r}}else{if(typeof r==="object"){return r.upper}return r}};r.prototype.emitStyle=function(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})};r.prototype.onStart=function(r){var n=this.rect=this.rangeSlider.getBoundingClientRect();var e=r.currentX;var a=s(0,(e-n.left)/n.width,1);if(document.dir==="rtl"){a=1-a}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-a)<Math.abs(this.ratioB-a)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)};r.prototype.onMove=function(r){this.update(r.currentX)};r.prototype.onEnd=function(r){this.update(r.currentX);this.pressedKnob=undefined};r.prototype.update=function(r){var n=this.rect;var e=s(0,(r-n.left)/n.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=p(h(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()};Object.defineProperty(r.prototype,"valA",{get:function(){return h(this.ratioA,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"valB",{get:function(){return h(this.ratioB,this.min,this.max,this.step)},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioLower",{get:function(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0},enumerable:false,configurable:true});Object.defineProperty(r.prototype,"ratioUpper",{get:function(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA},enumerable:false,configurable:true});r.prototype.updateRatio=function(){var r=this.getValue();var n=this,e=n.min,a=n.max;if(this.dualKnobs){this.ratioA=p(r.lower,e,a);this.ratioB=p(r.upper,e,a)}else{this.ratioA=p(r,e,a)}};r.prototype.updateValue=function(){this.noUpdate=true;var r=this,n=r.valA,e=r.valB;this.value=!this.dualKnobs?n:{lower:Math.min(n,e),upper:Math.max(n,e)};this.noUpdate=false};r.prototype.setFocus=function(r){if(this.el.shadowRoot){var n=this.el.shadowRoot.querySelector(r==="A"?".range-knob-a":".range-knob-b");if(n){n.focus()}}};r.prototype.render=function(){var r;var n=this;var e=this,a=e.min,i=e.max,s=e.step,l=e.el,g=e.handleKeyboard,u=e.pressedKnob,h=e.disabled,f=e.pin,m=e.ratioLower,v=e.ratioUpper;var k=m*100+"%";var w=100-v*100+"%";var y=document;var x=y.dir==="rtl";var z=x?"right":"left";var B=x?"left":"right";var A=function(r){var n;return n={},n[z]=r[z],n};var C=(r={},r[z]=k,r[B]=w,r);var K=[];if(this.snaps&&this.ticks){for(var S=a;S<=i;S+=s){var F=p(S,a,i);var j={ratio:F,active:F>=m&&F<=v};j[z]=F*100+"%";K.push(j)}}c(true,l,this.name,JSON.stringify(this.getValue()),h);return t(o,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:b(this.color,{"range-disabled":h,"range-pressed":u!==undefined,"range-has-pin":f,"range-snaps":this.snaps})},t("div",{class:"range-wrap"},t("slot",{name:"start"}),t("div",{class:"range-slider",ref:function(r){return n.rangeSlider=r}},K.map((function(r){return t("span",{style:A(r),role:"presentation",class:{"range-tick":true,"range-tick-active":r.active},part:r.active?"tick-active":"tick"})})),t("div",{class:"range-bar",role:"presentation",part:"bar"}),t("div",{class:"range-bar range-bar-active",role:"presentation",style:C,part:"bar-active"}),d(x,{knob:"A",pressed:u==="A",value:this.valA,ratio:this.ratioA,pin:f,disabled:h,handleKeyboard:g,min:a,max:i}),this.dualKnobs&&d(x,{knob:"B",pressed:u==="B",value:this.valB,ratio:this.ratioB,pin:f,disabled:h,handleKeyboard:g,min:a,max:i})),t("slot",{name:"end"})))};Object.defineProperty(r.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(r,"watchers",{get:function(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return r}());var d=function(r,n){var e=n.knob,a=n.value,o=n.ratio,i=n.min,s=n.max,c=n.disabled,b=n.pressed,l=n.pin,g=n.handleKeyboard;var u=r?"right":"left";var d=function(){var r={};r[u]=o*100+"%";return r};return t("div",{onKeyDown:function(r){var n=r.key;if(n==="ArrowLeft"||n==="ArrowDown"){g(e,false);r.preventDefault();r.stopPropagation()}else if(n==="ArrowRight"||n==="ArrowUp"){g(e,true);r.preventDefault();r.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":e==="A","range-knob-b":e==="B","range-knob-pressed":b,"range-knob-min":a===i,"range-knob-max":a===s},style:d(),role:"slider",tabindex:c?-1:0,"aria-valuemin":i,"aria-valuemax":s,"aria-disabled":c?"true":null,"aria-valuenow":a},l&&t("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(a)),t("div",{class:"range-knob",role:"presentation",part:"knob"}))};var h=function(r,n,e,a){var t=(e-n)*r;if(a>0){t=Math.round(t/a)*a+n}return s(n,t,e)};var p=function(r,n,e){return s(0,(r-n)/(e-n),1)};u.style=g}}}));
+//# sourceMappingURL=p-f27c9429.system.entry.js.map

package/dist/nano-components/{p-507490fc.system.entry.js.map → p-f27c9429.system.entry.js.map}

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

package/dist/nano-components/{p-372ce425.entry.js → p-f3688bce.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as a,e,g as r}from"./p-f55560d3.js";let n=0,s=class{constructor(a){t(this,a),this.tabContentId="nano-tab-content-"+ ++n,this.name="",this.active=!1}render(){return a(e,{id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true"},a("div",{part:"base",class:"nano-tab-content slide-in"},a("slot",null)))}get host(){return r(this)}};s.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:opacity 0.3s ease-in-out forwards;animation:opacity 0.3s ease-in-out forwards;opacity:1}@media only screen and (max-width: 768px){:host([animation-dir=left]){-webkit-animation:slide-right 0.3s ease-in-out;animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){-webkit-animation:slide-left 0.3s ease-in-out;animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@-webkit-keyframes opacity{0%{opacity:0}100%{opacity:100%}}@keyframes opacity{0%{opacity:0}100%{opacity:100%}}@-webkit-keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none !important;animation:none !important}}";export{s as nano_tab_content}
-//# sourceMappingURL=p-372ce425.entry.js.map
+import{r as t,h as a,e,g as r}from"./p-bb0619e6.js";let n=0,s=class{constructor(a){t(this,a),this.tabContentId="nano-tab-content-"+ ++n,this.name="",this.active=!1}render(){return a(e,{id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true"},a("div",{part:"base",class:"nano-tab-content slide-in"},a("slot",null)))}get host(){return r(this)}};s.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:opacity 0.3s ease-in-out forwards;animation:opacity 0.3s ease-in-out forwards;opacity:1}@media only screen and (max-width: 768px){:host([animation-dir=left]){-webkit-animation:slide-right 0.3s ease-in-out;animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){-webkit-animation:slide-left 0.3s ease-in-out;animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@-webkit-keyframes opacity{0%{opacity:0}100%{opacity:100%}}@keyframes opacity{0%{opacity:0}100%{opacity:100%}}@-webkit-keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none !important;animation:none !important}}";export{s as nano_tab_content}
+//# sourceMappingURL=p-f3688bce.entry.js.map

package/dist/nano-components/{p-35eb8352.system.entry.js → p-f86db7c0.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,n,t,o){function r(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,i){function a(e){try{c(o.next(e))}catch(n){i(n)}}function s(e){try{c(o["throw"](e))}catch(n){i(n)}}function c(e){e.done?t(e.value):r(e.value).then(a,s)}c((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(n){return c([e,n])}}function c(a){if(o)throw new TypeError("Generator is already executing.");while(t)try{if(o=1,r&&(i=a[0]&2?r["return"]:a[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;if(r=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;r=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){t.label=a[1];break}if(a[0]===6&&t.label<i[1]){t.label=i[1];i=a;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(a);break}if(i[2])t.ops.pop();t.trys.pop();continue}a=n.call(e,t)}catch(s){a=[6,s];r=0}finally{o=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-3d1c1c19.system.js","./p-f00d0c25.system.js","./p-20c43a20.system.js"],(function(e){"use strict";var n,t,o,r,i,a,s,c;return{setters:[function(e){n=e.r;t=e.c;o=e.h;r=e.e;i=e.g},function(e){a=e.g},function(e){s=e.s},function(e){c=e.g}],execute:function(){var u=".sc-nano-menu-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-menu,*.sc-nano-menu::before,*.sc-nano-menu::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-menu-h.legacy .sc-nano-menu-s>*,.legacy.sc-nano-menu-h *.sc-nano-menu{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:10px;--secondary-padding-bottom:10px;--secondary-bg-color:#fff;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#0084a9;--color-selected:#0084a9;--color-focus:#0084a9;--focus-outline:none;display:block}.sc-nano-menu-h{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#0084a9;--color-selected:#0084a9;--color-focus:#0084a9;--focus-outline:none;display:block}.menu.sc-nano-menu{-ms-scroll-chaining:none;overscroll-behavior:none;font-size:0.9em;min-width:var(--width);position:relative}.menu.sc-nano-menu:focus{outline:none}.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:var(--padding-start);margin-right:var(--padding-end);margin-top:var(--padding-top);margin-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:var(--padding-end);margin-inline-end:var(--padding-end)}}";var l=!!document.head.attachShadow;var f=e("nano_menu",function(){function e(e){var o=this;n(this,e);this.nanoFocus=t(this,"nanoFocus",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoSelect=t(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this.handleFocus=function(){var e=o.getActiveItem();if(!e){o.setActiveItem(o.getItems()[0])}o.nanoFocus.emit()};this.handleBlur=function(){};this.handleClick=function(e){var n=e.target;var t=n.closest("nano-nav-item");if(t&&!t.disabled){o.nanoSelect.emit({item:t})}};this.handleKeyDown=function(e){clearTimeout(o.ignoreMouseTimeout);o.ignoreMouseTimeout=setTimeout((function(){return o.ignoreMouseEvents=false}),500);o.ignoreMouseEvents=true;switch(e.key){case" ":var n=o.getActiveItem();n.click();break;case"ArrowDown":case"ArrowUp":case"Home":case"End":var t=o.getItems();var r=o.getActiveItem();var i=t.indexOf(r);if(t.length){e.preventDefault();if(e.key==="ArrowDown"){i++}else if(e.key==="ArrowUp"){i--}else if(e.key==="Home"){i=0}else if(e.key==="End"){i=t.length-1}if(i<0)i=0;if(i>t.length-1)i=t.length-1;o.setActiveItem(t[i]);o.scrollItemIntoView(t[i]);return}break}if(e.key===" "||/^[\d\w]$/i.test(e.key)){clearTimeout(o.typeToSelectTimeout);o.typeToSelectTimeout=setTimeout((function(){return o.typeToSelect=""}),750);o.typeToSelect+=e.key;var t=o.getItems();for(var a=0,s=t;a<s.length;a++){var u=s[a];var l=u.shadowRoot.querySelector("slot:not([name])");var f=c(l).toLowerCase().trim();if(f.substring(0,o.typeToSelect.length)===o.typeToSelect){u.setFocus();break}}}};this.handleMouseOver=function(e){var n=e.target;var t=n.closest("nano-nav-item");if(t&&!o.ignoreMouseEvents){o.setActiveItem(t)}}}e.prototype.connectedCallback=function(){};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.focus();return[2]}))}))};e.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.blur();return[2]}))}))};e.prototype.getItems=function(){var e;var n=this.el.querySelectorAll("nano-nav-item.secondary-open");if(n.length){var t=n[n.length-1];e=Array.from(t.querySelectorAll("nano-nav-item"))}else{e=a(this.el,"nano-nav-item")}return e.filter((function(e){return!e.disabled}))};e.prototype.getActiveItem=function(){return this.el.querySelector("nano-nav-item.has-focus")};e.prototype.setActiveItem=function(e){if(e)e.setFocus();else this.el.setFocus()};e.prototype.scrollItemIntoView=function(e){if(e){s(e,this.menu)}};e.prototype.render=function(){var e=this;return o(r,{class:{legacy:!l}},o("nav",{ref:function(n){return e.menu=n},part:"base",class:"menu",tabIndex:-1,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver},o("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());f.style=u}}}));
-//# sourceMappingURL=p-35eb8352.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(e,n,t,o){function r(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,i){function a(e){try{c(o.next(e))}catch(n){i(n)}}function s(e){try{c(o["throw"](e))}catch(n){i(n)}}function c(e){e.done?t(e.value):r(e.value).then(a,s)}c((o=o.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(n){return c([e,n])}}function c(a){if(o)throw new TypeError("Generator is already executing.");while(t)try{if(o=1,r&&(i=a[0]&2?r["return"]:a[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;if(r=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:t.label++;return{value:a[1],done:false};case 5:t.label++;r=a[1];a=[0];continue;case 7:a=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){t=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){t.label=a[1];break}if(a[0]===6&&t.label<i[1]){t.label=i[1];i=a;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(a);break}if(i[2])t.ops.pop();t.trys.pop();continue}a=n.call(e,t)}catch(s){a=[6,s];r=0}finally{o=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-af9f6453.system.js","./p-3d1c1c19.system.js","./p-f00d0c25.system.js","./p-20c43a20.system.js"],(function(e){"use strict";var n,t,o,r,i,a,s,c;return{setters:[function(e){n=e.r;t=e.c;o=e.h;r=e.e;i=e.g},function(e){a=e.g},function(e){s=e.s},function(e){c=e.g}],execute:function(){var u=".sc-nano-menu-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-menu,*.sc-nano-menu::before,*.sc-nano-menu::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-menu-h.legacy .sc-nano-menu-s>*,.legacy.sc-nano-menu-h *.sc-nano-menu{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:10px;--secondary-padding-bottom:10px;--secondary-bg-color:#fff;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;display:block}.sc-nano-menu-h{--padding-start:10px;--padding-end:10px;--padding-top:10px;--padding-bottom:10px;--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;display:block}.menu.sc-nano-menu{-ms-scroll-chaining:none;overscroll-behavior:none;font-size:0.9em;min-width:var(--width);position:relative}.menu.sc-nano-menu:focus{outline:none}.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:var(--padding-start);margin-right:var(--padding-end);margin-top:var(--padding-top);margin-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.menu.sc-nano-menu-s>*:not(nano-nav-item){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-start);margin-inline-start:var(--padding-start);-webkit-margin-end:var(--padding-end);margin-inline-end:var(--padding-end)}}";var l=!!document.head.attachShadow;var f=e("nano_menu",function(){function e(e){var o=this;n(this,e);this.nanoFocus=t(this,"nanoFocus",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoSelect=t(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this.handleFocus=function(){var e=o.getActiveItem();if(!e){o.setActiveItem(o.getItems()[0])}o.nanoFocus.emit()};this.handleBlur=function(){};this.handleClick=function(e){var n=e.target;var t=n.closest("nano-nav-item");if(t&&!t.disabled){o.nanoSelect.emit({item:t})}};this.handleKeyDown=function(e){clearTimeout(o.ignoreMouseTimeout);o.ignoreMouseTimeout=setTimeout((function(){return o.ignoreMouseEvents=false}),500);o.ignoreMouseEvents=true;switch(e.key){case" ":var n=o.getActiveItem();n.click();break;case"ArrowDown":case"ArrowUp":case"Home":case"End":var t=o.getItems();var r=o.getActiveItem();var i=t.indexOf(r);if(t.length){e.preventDefault();if(e.key==="ArrowDown"){i++}else if(e.key==="ArrowUp"){i--}else if(e.key==="Home"){i=0}else if(e.key==="End"){i=t.length-1}if(i<0)i=0;if(i>t.length-1)i=t.length-1;o.setActiveItem(t[i]);o.scrollItemIntoView(t[i]);return}break}if(e.key===" "||/^[\d\w]$/i.test(e.key)){clearTimeout(o.typeToSelectTimeout);o.typeToSelectTimeout=setTimeout((function(){return o.typeToSelect=""}),750);o.typeToSelect+=e.key;var t=o.getItems();for(var a=0,s=t;a<s.length;a++){var u=s[a];var l=u.shadowRoot.querySelector("slot:not([name])");var f=c(l).toLowerCase().trim();if(f.substring(0,o.typeToSelect.length)===o.typeToSelect){u.setFocus();break}}}};this.handleMouseOver=function(e){var n=e.target;var t=n.closest("nano-nav-item");if(t&&!o.ignoreMouseEvents){o.setActiveItem(t)}}}e.prototype.connectedCallback=function(){};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.focus();return[2]}))}))};e.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menu.blur();return[2]}))}))};e.prototype.getItems=function(){var e;var n=this.el.querySelectorAll("nano-nav-item.secondary-open");if(n.length){var t=n[n.length-1];e=Array.from(t.querySelectorAll("nano-nav-item"))}else{e=a(this.el,"nano-nav-item")}return e.filter((function(e){return!e.disabled}))};e.prototype.getActiveItem=function(){return this.el.querySelector("nano-nav-item.has-focus")};e.prototype.setActiveItem=function(e){if(e)e.setFocus();else this.el.setFocus()};e.prototype.scrollItemIntoView=function(e){if(e){s(e,this.menu)}};e.prototype.render=function(){var e=this;return o(r,{class:{legacy:!l}},o("nav",{ref:function(n){return e.menu=n},part:"base",class:"menu",tabIndex:-1,onClick:this.handleClick,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver},o("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});return e}());f.style=u}}}));
+//# sourceMappingURL=p-f86db7c0.system.entry.js.map

package/dist/nano-components/{p-35eb8352.system.entry.js.map → p-f86db7c0.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/menu/menu.scss?tag=nano-menu&encapsulation=scoped","src/components/menu/menu.tsx"],"names":["menuCss","CANSHADOW","document","head","attachShadow","Menu","exports","class_1","hostRef","_this","this","ignoreMouseEvents","typeToSelect","handleFocus","item","getActiveItem","setActiveItem","getItems","nanoFocus","emit","handleBlur","handleClick","event","target","closest","disabled","nanoSelect","handleKeyDown","clearTimeout","ignoreMouseTimeout","setTimeout","key","ele","click","items","selectedItem","index","indexOf","length","preventDefault","scrollItemIntoView","test","typeToSelectTimeout","_i","items_1","slot","shadowRoot","querySelector","label","getTextContent","toLowerCase","trim","substring","setFocus","handleMouseOver","prototype","connectedCallback","menu","focus","removeFocus","blur","opened","el","querySelectorAll","ctx","Array","from","getDirectChildren","filter","scrollIntoView","render","h","Host","class","legacy","ref","part","tabIndex","onClick","onFocus","onBlur","onKeyDown","onMouseOver"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --padding-start: 10px;\n    --padding-end: 10px;\n    --padding-top: 10px;\n    --padding-bottom: 10px;\n    --secondary-padding-top: 10px;\n    --secondary-padding-bottom: 10px;\n    --secondary-bg-color: #{$color-white};\n    --bg-color-hover: #{$color-blue--faded};\n    --bg-color-focus: #{$color-blue--faded};\n    --bg-color-selected: #{$color-blue--faded};\n    --color-hover: #{$color-blue};\n    --color-selected: #{$color-blue};\n    --color-focus: #{$color-blue};\n    --focus-outline: none;\n\n    display: block;\n  }\n}\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n  */\n\n  --padding-start: 10px;\n  --padding-end: 10px;\n  --padding-top: 10px;\n  --padding-bottom: 10px;\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n  --focus-outline: none;\n\n  display: block;\n}\n\n.menu {\n  overscroll-behavior: none;\n  font-size: 0.9em;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.menu::slotted(*:not(nano-nav-item)) {\n  @include margin(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  scrollIntoView,\n  getDirectChildren,\n} from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  scoped: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter;\n\n  connectedCallback() {}\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    this.menu.focus();\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    this.menu.blur();\n  }\n\n  private getItems() {\n    let items: HTMLNanoNavItemElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item'\n      ) as HTMLNanoNavItemElement[];\n    }\n    return items.filter((el) => !el.disabled);\n  }\n\n  private getActiveItem() {\n    return this.el.querySelector(\n      'nano-nav-item.has-focus'\n    ) as HTMLNanoNavItemElement;\n  }\n\n  private setActiveItem(item?: HTMLNanoNavItemElement) {\n    if (item) item.setFocus();\n    else this.el.setFocus();\n  }\n\n  private scrollItemIntoView(item: HTMLNanoNavItemElement) {\n    if (item) {\n      scrollIntoView(item, this.menu);\n    }\n  }\n\n  private handleFocus = () => {\n    const item = this.getActiveItem();\n    if (!item) {\n      this.setActiveItem(this.getItems()[0]);\n    }\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    //this.setActiveItem();\n    // this.nanoBlur.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit({ item });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        let ele = this.getActiveItem();\n        ele.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems();\n        const selectedItem = this.getActiveItem();\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home') {\n            index = 0;\n          } else if (event.key === 'End') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = 0;\n          if (index > items.length - 1) index = items.length - 1;\n\n          this.setActiveItem(items[index]);\n          this.scrollItemIntoView(items[index]);\n\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[\\d\\w]$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems();\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          item.setFocus();\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveItem(item);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <nav\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class=\"menu\"\n          tabIndex={-1}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n        >\n          <slot />\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/menu/menu.scss?tag=nano-menu&encapsulation=scoped","src/components/menu/menu.tsx"],"names":["menuCss","CANSHADOW","document","head","attachShadow","Menu","exports","class_1","hostRef","_this","this","ignoreMouseEvents","typeToSelect","handleFocus","item","getActiveItem","setActiveItem","getItems","nanoFocus","emit","handleBlur","handleClick","event","target","closest","disabled","nanoSelect","handleKeyDown","clearTimeout","ignoreMouseTimeout","setTimeout","key","ele","click","items","selectedItem","index","indexOf","length","preventDefault","scrollItemIntoView","test","typeToSelectTimeout","_i","items_1","slot","shadowRoot","querySelector","label","getTextContent","toLowerCase","trim","substring","setFocus","handleMouseOver","prototype","connectedCallback","menu","focus","removeFocus","blur","opened","el","querySelectorAll","ctx","Array","from","getDirectChildren","filter","scrollIntoView","render","h","Host","class","legacy","ref","part","tabIndex","onClick","onFocus","onBlur","onKeyDown","onMouseOver"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n\n:host(.legacy) {\n  ::slotted(*),\n  * {\n    --padding-start: 10px;\n    --padding-end: 10px;\n    --padding-top: 10px;\n    --padding-bottom: 10px;\n    --secondary-padding-top: 10px;\n    --secondary-padding-bottom: 10px;\n    --secondary-bg-color: #{$color-white};\n    --bg-color-hover: #{$color-blue--faded};\n    --bg-color-focus: #{$color-blue--faded};\n    --bg-color-selected: #{$color-blue--faded};\n    --color-hover: #{$color-blue};\n    --color-selected: #{$color-blue};\n    --color-focus: #{$color-blue};\n    --focus-outline: none;\n\n    display: block;\n  }\n}\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{$color-blue--faded};\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{$color-blue}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n  */\n\n  --padding-start: 10px;\n  --padding-end: 10px;\n  --padding-top: 10px;\n  --padding-bottom: 10px;\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{$color-blue--faded};\n  --bg-color-focus: #{$color-blue--faded};\n  --bg-color-selected: #{$color-blue--faded};\n  --color-hover: #{$color-blue};\n  --color-selected: #{$color-blue};\n  --color-focus: #{$color-blue};\n  --focus-outline: none;\n\n  display: block;\n}\n\n.menu {\n  overscroll-behavior: none;\n  font-size: 0.9em;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.menu::slotted(*:not(nano-nav-item)) {\n  @include margin(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n} from '@stencil/core';\nimport { getTextContent, scrollIntoView, getDirectChildren } from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * @slot - The menu's content, including menu items, menu dividers, and menu labels.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  scoped: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter;\n\n  connectedCallback() {}\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    this.menu.focus();\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    this.menu.blur();\n  }\n\n  private getItems() {\n    let items: HTMLNanoNavItemElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item'\n      ) as HTMLNanoNavItemElement[];\n    }\n    return items.filter((el) => !el.disabled);\n  }\n\n  private getActiveItem() {\n    return this.el.querySelector(\n      'nano-nav-item.has-focus'\n    ) as HTMLNanoNavItemElement;\n  }\n\n  private setActiveItem(item?: HTMLNanoNavItemElement) {\n    if (item) item.setFocus();\n    else this.el.setFocus();\n  }\n\n  private scrollItemIntoView(item: HTMLNanoNavItemElement) {\n    if (item) {\n      scrollIntoView(item, this.menu);\n    }\n  }\n\n  private handleFocus = () => {\n    const item = this.getActiveItem();\n    if (!item) {\n      this.setActiveItem(this.getItems()[0]);\n    }\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    //this.setActiveItem();\n    // this.nanoBlur.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit({ item });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        let ele = this.getActiveItem();\n        ele.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems();\n        const selectedItem = this.getActiveItem();\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home') {\n            index = 0;\n          } else if (event.key === 'End') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = 0;\n          if (index > items.length - 1) index = items.length - 1;\n\n          this.setActiveItem(items[index]);\n          this.scrollItemIntoView(items[index]);\n\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[\\d\\w]$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems();\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          item.setFocus();\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveItem(item);\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <nav\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class=\"menu\"\n          tabIndex={-1}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n        >\n          <slot />\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}