@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/p-dd66cc74.entry.js.map

@@ -1 +0,0 @@
-{"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.tsx","src/components/date-picker/date-picker.scss?tag=nano-date-picker&encapsulation=shadow","src/components/dropdown/dropdown.tsx","src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","inRange","min","max","time","getTime","clamp","DatePickerDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","isSelected","isToday","isFocused","isDisabled","isOutsideRange","h","class","duet-date__day","is-outside","is-disabled","is-today","tabIndex","onClick","e","onKeyDown","type","aria-pressed","ref","el","aria-hidden","toLocaleDateString","undefined","month","DatePickerMonth","selectedDate","focusedDate","labelledById","localization","firstDayOfWeek","onDateSelect","onMouseDown","onFocusIn","isDateDisabled","Monday","start","end","current","push","getDaysInRange","getDay","diff","startOfWeek","startOfMonth","endOfWeek","endOfMonth","getViewOfMonth","role","aria-labelledby","onFocusin","startingOffset","mapFn","dayName","scope","substr","array","dayNames","map","_","i","length","result","slice","chunk","week","aria-selected","buttonLabel","placeholder","selectedDateMessage","prevMonthLabel","nextMonthLabel","monthSelectLabel","yearSelectLabel","closeLabel","keyboardInstruction","calendarHeading","monthNames","monthNamesShort","NanoDatePicker","[object Object]","hostRef","this","monthSelectId","createIdentifier","yearSelectId","dialogLabelId","initialTouchX","initialTouchY","activeFocus","defaultLocalization","isModal","enableActiveFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchMove","preventDefault","handleTouchEnd","distX","distY","Math","abs","addMonths","handleNextMonthClick","handlePreviousMonthClick","handleKeyboardNavigation","key","shiftKey","firstFocusEle","firstFocusableElement","focus","handled","addYears","handleDaySelect","_event","isAllowed","parseISODate","setValue","setFocusedDay","handleMonthSelect","setMonth","parseInt","target","value","handleYearSelect","setYear","processFocusedDayNode","element","focusedDayNode","setTimeout","clearTimeout","focusTimeoutId","monthSelectNode","setFocus","months","years","year","printISODate","nanoDatePicked","emit","valueAsDate","handleSelectedDateChange","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","from","to","range","Dropdown","dropdownId","dropDownIds","labelId","ignoreOpenWatcher","menuFocused","autoOpen","open","placement","closeOnSelect","distance","skidding","hoist","dialogTitle","handleTriggerKeyDown","includes","show","stopPropagation","handleTriggerSlotChange","updateAccessibleTrigger","togglePanel","hide","popover","setOptions","strategy","ev","tagName","toLowerCase","detail","secondaryMenu","panel","classList","add","transitionDone","then","remove","style","minHeight","scrollHeight","parentElement","handleDocumentKeyDown","bind","handleDocumentMouseDown","handlePanelSelect","containingElement","host","Popover","trigger","positioner","transitionElement","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","onTransitionEnd","scrollTop","destroy","nanoShow","defaultPrevented","document","addEventListener","nanoHide","removeEventListener","querySelector","activeElement","closest","menu","getMenu","dispatchEvent","KeyboardEvent","accessibleTrigger","Array","querySelectorAll","getNearestTabbableElement","setAttribute","part","dropdown","dropdown--open","aria-expanded","aria-haspopup","onSlotchange","split","join","aria-modal"],"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 {\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/utils';\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 NanoDatePicker 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 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. If day set, will focus to the current selected day.\n   * @param day\n   */\n  @Method()\n  async setFocus(day: boolean = 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(() => this.monthSelectNode.focus(), 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  componentWillLoad() {\n    this.handleSelectedDateChange();\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                    >\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/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    margin-right: 4px;\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 + .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  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/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  /**\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   * 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() containingElement: HTMLElement;\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  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle: string | null = null;\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  @Watch('open')\n  handleOpenChange() {\n    if (!this.ignoreOpenWatcher) {\n      this.open ? this.show() : this.hide();\n      this.updateAccessibleTrigger();\n    }\n  }\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  @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  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.popover = new Popover(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\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hide();\n    if (this.popover) this.popover.destroy();\n  }\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 getMenu() {\n    return this.host.querySelector('nano-menu') as HTMLNanoMenuElement;\n  }\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  @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  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 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    const assignedElements = Array.from(\n      this.host.querySelectorAll('[slot=\"trigger\"]')\n    );\n    const accessibleTrigger = assignedElements.map(\n      getNearestTabbableElement\n    )[0];\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  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","@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"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/accordion/accordion.scss?tag=nano-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx"],"names":["accordionCss","Accordion","exports","class_1","prototype","onToggleHandler","event","_this","this","stopPropagation","items","getDirectChildren","el","querySelectorAll","forEach","item","i","target","open","itemOpened","nanoToggle","emit","onClosedHandler","render","h","Host","class","Object","assign","createColorClasses","color","_a","connectedCallback"],"mappings":"8PAAA,IAAMA,EAAe,8JCwBRC,EAASC,EAAA,iBAAA,0EAgBpBC,EAAAC,UAAAC,gBAAA,SAAgBC,GAAhB,IAAAC,EAAAC,KACEF,EAAMG,kBAEN,IAAIC,EACFC,EAAkBH,KAAKI,GAAI,iBAC3BJ,KAAKI,GAAGC,iBAAiB,gBAC3BH,EAAMI,SAAQ,SAACC,EAA8BC,GAC3C,GAAID,IAAST,EAAMW,OAAQF,EAAKG,KAAO,WAClCX,EAAKY,WAAaH,KAEzBR,KAAKY,WAAWC,QAIlBlB,EAAAC,UAAAkB,gBAAA,SAAgBhB,GACdA,EAAMG,kBACND,KAAKW,WAAa,KAClBX,KAAKY,WAAWC,QAGlBlB,EAAAC,UAAAmB,OAAA,iBACE,OACEC,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EAAmBrB,KAAKsB,SAAMC,EAAA,GACjCA,EAAC,cAAcvB,KAAKW,mBACXX,KAAKW,aAAe,SAAQY,KAGvCP,EAAA,OAAA,QAKNrB,EAAAC,UAAA4B,kBAAA,kIAlDoB","sourcesContent":[":host {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Listen,\n  Element,\n  Host,\n  Prop,\n  EventEmitter,\n  Event,\n  State,\n} from '@stencil/core';\n\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { testLegacyStyle, getDirectChildren } from '../../utils/utils';\n\n/**\n * Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.\n */\n@Component({\n  tag: 'nano-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  @State() itemOpened?: number;\n\n  @Element() el: HTMLNanoAccordionElement;\n\n  /**\n   * Fires when accordion elements toggle\n   */\n  @Event() nanoToggle: EventEmitter;\n\n  /**\n   * Color to use from the color palette.\n   */\n  @Prop() color?: Color;\n\n  @Listen('nanoOpened')\n  onToggleHandler(event: CustomEvent) {\n    event.stopPropagation();\n\n    let items =\n      getDirectChildren(this.el, 'nano-details') ||\n      this.el.querySelectorAll('nano-details');\n    items.forEach((item: HTMLNanoDetailsElement, i) => {\n      if (item !== event.target) item.open = false;\n      else this.itemOpened = i;\n    });\n    this.nanoToggle.emit();\n  }\n\n  @Listen('nanoClosed')\n  onClosedHandler(event: CustomEvent) {\n    event.stopPropagation();\n    this.itemOpened = null;\n    this.nanoToggle.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          ...createColorClasses(this.color),\n          [`nano-color-${this.itemOpened}`]:\n            typeof this.itemOpened === 'number',\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/grid/grid.scss?tag=nano-grid&encapsulation=shadow","src/components/grid/grid.tsx","src/components/grid/grid-item.scss?tag=nano-grid-item&encapsulation=shadow","src/components/grid/grid-item.tsx","src/components/img/img.scss?tag=nano-img&encapsulation=shadow","src/components/img/img.tsx"],"names":["gridCss","STATEOPTS","CANSHADOW","document","head","attachShadow","Grid","exports","class_1","hostRef","this","generalClasses","gridClass","isSizes","ready","isSmall","isMedium","isLarge","isXL","isXXL","sSize","mSize","lSize","xlSize","showHelper","contentPanel","fullHeight","prototype","propChanged","applySizeClasses","_this","size","currentWidth","push","sCols","active","mCols","lCols","xlCols","xxlCols","el","style","setProperty","slice","pop","applyChildrenClasses","setTimeout","gridItems","querySelectorAll","length","forEach","gridItem","changeBP","stateArr","itemState","found","itemStates","classes","ctx","querySelector","map","call","children","gItem","hasAttribute","className","split","filter","c","startsWith","join","trim","getAttribute","stateOpt","reverse","find","state","indexOf","includes","shift","classList","add","connectedCallback","componentWillLoad","wrapper","ele","contains","nodeName","createElement","setAttribute","removeAttribute","insertBefore","appendChild","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","entry","contentRect","width","observe","disconnectedCallback","disconnect","render","h","Host","class","_a","is-legacy","undefined","grid","gridItemCss","GridItem","class_2","currGridSizes","gridStates","updateGridClasses","newGridSizes","imgCss","Img","class_3","_srcSet","hasLoaded","imgStates","lazy","autoHeight","onLoad","nanoImgDidLoad","emit","onError","nanoImgError","onResize","e","Object","detail","bp","srcOpts","keys","sort","src","_src","_srcChanged","addIO","srcChanged","srcSetChanged","srcSet","bpSrc","lazyChanged","load","window","IntersectionObserverEntry","removeIO","io","IntersectionObserver","data","isIntersecting","host","loadError","loadSrc","nanoImgWillLoad","bgStyle","background-image","background","loaded","img__bg","no-height","img__image","hide","decoding","alt","onNanoResizeStateChange","states"],"mappings":"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","sourcesContent":["// we use &::slotted selectors to target ie ... this is a due to a bug with how stencil makes css scoping for browsers without shadow-dom. Need to be mindful incase they ever fix this!\n\n@import '../../global/style/nano-theme/base';\n\n// ie 11 fixes ... maximum numbers we can place on the grid ... upping this number decreases performance a lot.\n$max-grid-cols: 10;\n\n@mixin grid($size: 1) {\n  @at-root :host(.nano-grid-#{$size}) {\n    --current-grid-size: 'grid size: #{$size}';\n    --col-width: calc(#{100 / $size}% - var(--grid-col-gap));\n    --repeat-width: calc(100% / #{$size});\n\n    .grid {\n      grid-template-columns: repeat(#{$size}, minmax(var(--col-width), 1fr));\n\n      $current-column: 1;\n      $current-row: 1;\n\n      @for $i from 1 through ($max-grid-cols * 2) {\n        @if $current-column > $size {\n          $current-column: 1;\n          $current-row: $current-row + 1;\n        }\n\n        &::slotted(:nth-child(#{$i})) {\n          -ms-grid-row: $current-row;\n          -ms-grid-column: $current-column;\n          // use margin because there's no grid gap.\n        }\n        $current-column: $current-column + 1;\n      }\n    }\n  }\n}\n\n@mixin grid-spans {\n  @for $i from 1 through $max-grid-cols {\n    ::slotted(.nano-grid-col-start-#{$i}),\n    &::slotted(.nano-grid-col-start-#{$i}) {\n      grid-column-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-start-#{$i}),\n    &::slotted(.nano-grid-row-start-#{$i}) {\n      grid-row-start: #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-col-span-#{$i}),\n    &::slotted(.nano-grid-col-span-#{$i}) {\n      grid-column-end: span #{$i} !important;\n    }\n\n    ::slotted(.nano-grid-row-span-#{$i}),\n    &::slotted(.nano-grid-row-span-#{$i}) {\n      grid-row-end: span #{$i} !important;\n    }\n  }\n}\n\n:host {\n  /**\n  * @prop --grid-col-gap: gap between all columns. Defaults to theme's global padding\n  * @prop --grid-row-gap: gap between all rows. Defaults to theme's global padding\n  */\n\n  --grid-col-gap: #{$spacing-medium};\n  --grid-row-gap: #{$spacing-medium};\n  --current-grid-size: \"'grid size: sm'\";\n\n  display: block;\n  opacity: 0;\n  transition: 0.2s ease opacity;\n\n  .grid {\n    /* autoprefixer: ignore next */\n    display: grid;\n\n    /* autoprefixer: ignore next */\n    grid-gap: var(--grid-row-gap) var(--grid-col-gap);\n    height: inherit;\n    min-height: inherit;\n\n    &::slotted(*) {\n      border: 0 solid transparent;\n      background-clip: padding-box;\n      border-width: var(--grid-row-gap) calc(var(--grid-col-gap) / 2);\n    }\n  }\n}\n\n:host(.ready) {\n  opacity: 1;\n}\n\n:host(.has-grid) {\n  .grid {\n    display: grid;\n\n    @include grid-spans;\n\n    // ie 'grid gap'. use border because there's no grid gap.\n    &::slotted(*) {\n      border-width: calc(var(--grid-row-gap) / 2) calc(var(--grid-col-gap) / 2);\n    }\n  }\n}\n\n// All sorts of IE fuckery to recreate grid-gap when nested etc\n:host([is-legacy]) {\n  overflow: hidden;\n\n  .grid {\n    margin-bottom: calc(var(--grid-row-gap) * -0.5);\n    margin-top: calc(var(--grid-row-gap) * -0.5);\n    margin-left: calc(var(--grid-col-gap) * -0.5);\n    margin-right: calc(var(--grid-col-gap) * -0.5);\n  }\n}\n\n// nested\nnano-grid :host-context[is-legacy] {\n  overflow: visible;\n\n  .grid {\n    &::slotted(:first-child) {\n      border-top-width: calc(var(--grid-row-gap) / 2);\n    }\n\n    &::slotted(:last-child) {\n      border-bottom-width: calc(var(--grid-row-gap) / 2);\n    }\n  }\n}\n\n:host([content-panel]:not([content-panel='false'])) {\n  display: -ms-flexbox;\n  -ms-flex-direction: column;\n\n  .grid {\n    grid-template-rows: auto 1fr;\n  }\n}\n\n:host([full-height]:not([full-height='false'])) {\n  height: 100%;\n\n  .grid {\n    grid-template-rows: 1fr;\n\n    &::slotted(*) {\n      min-height: 100%;\n    }\n  }\n}\n\n:host([show-helper]:not([show-helper='false'])) {\n  .grid {\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      top: 0;\n      pointer-events: none;\n      background-image:\n        repeating-linear-gradient(\n          to right,\n          hsla(204, 80%, 72%, 0.25),\n          hsla(204, 80%, 72%, 0.25) var(--col-width),\n          transparent var(--col-width),\n          transparent var(--repeat-width)\n        );\n      background-size: calc(100% + var(--grid-col-gap)) 100%;\n      z-index: 100;\n    }\n\n    &::before {\n      content: var(--current-grid-size);\n      font-size: 30px;\n      position: absolute;\n      width: 100%;\n      left: 0;\n      text-align: center;\n      top: 50%;\n      transform: translateY(-50%);\n      color: rgba(0, 0, 0, 0.2);\n      text-transform: uppercase;\n      z-index: 99;\n      pointer-events: none;\n    }\n  }\n}\n\n@for $i from 1 through $max-grid-cols {\n  @include grid($i);\n}\n","import { Component, h, Prop, Element, Host, State, Watch } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { GridSizes } from '../../interface';\nimport { testLegacyStyle } from '../../utils/utils';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * A context-aware CSS grid implementation.\n * Uses it's own width to choose column number - not screen width.\n */\n@Component({\n  tag: 'nano-grid',\n  styleUrl: 'grid.scss',\n  shadow: true,\n})\nexport class Grid {\n  @Element() private el: HTMLNanoGridElement;\n  private ro: ResizeObserver;\n  private generalClasses: Array<string> = [''];\n  private gridClass: string = null;\n  private isSizes: GridSizes[] = [null];\n  private currentWidth: number;\n\n  @State() ready: boolean = false;\n  @State() isSmall = false;\n  @State() isMedium = false;\n  @State() isLarge = false;\n  @State() isXL = false;\n  @State() isXXL = false;\n\n  /**\n   * the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() sSize: number = 300;\n\n  /**\n   * the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() mSize: number = 550;\n\n  /**\n   * the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() lSize: number = 800;\n\n  /**\n   * the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\n   */\n  @Prop() xlSize: number = 1000;\n\n  /**\n   * the number of columns the grid has at the small breakpoint.\n   */\n  @Prop() sCols: number;\n\n  /**\n   * the number of columns the grid has at the medium breakpoint.\n   */\n  @Prop() mCols: number;\n\n  /**\n   * the number of columns the grid has at the large breakpoint.\n   */\n  @Prop() lCols: number;\n\n  /**\n   * the number of columns the grid has at the xl breakpoint.\n   */\n  @Prop() xlCols: number;\n\n  /**\n   * the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)\n   */\n  @Prop() xxlCols: number;\n\n  /**\n   * shows a grid helper to visualise where columns are\n   */\n  @Prop({ reflect: true }) showHelper: boolean = false;\n\n  /**\n   * shortcut for a traditional website like grid (requires more than one row). The second row will auto expand to fill the grid height. The first row and > 2nd row will be the size of their content. e.g. header, body and footer.\n   */\n  @Prop({ reflect: true }) contentPanel: boolean = false;\n\n  /**\n   * Helper to make grid items expand to full height in IE11\n   */\n  @Prop({ reflect: true }) fullHeight: boolean = false;\n\n  @Watch('sSize')\n  @Watch('mSize')\n  @Watch('lSize')\n  @Watch('xlSize')\n  @Watch('sCols')\n  @Watch('mCols')\n  @Watch('lCols')\n  @Watch('xlCols')\n  @Watch('xxlCols')\n  propChanged() {\n    this.applySizeClasses();\n  }\n\n  private applySizeClasses() {\n    let size = this.currentWidth;\n\n    this.isSmall = false;\n    this.isMedium = false;\n    this.isLarge = false;\n    this.isXL = false;\n    this.isXXL = false;\n\n    this.generalClasses = [];\n    this.gridClass = null;\n    this.isSizes = [null];\n\n    this.isSmall = true;\n    this.generalClasses.push('is-small');\n    if (this.sCols) this.gridClass = `nano-grid-${this.sCols}`;\n    this.isSizes.push({ size: 's', active: true });\n\n    if (size > this.sSize) {\n      this.isMedium = true;\n      this.generalClasses.push('is-medium');\n      if (this.mCols) this.gridClass = `nano-grid-${this.mCols}`;\n      this.isSizes.push({ size: 'm', active: true });\n    }\n\n    if (size > this.mSize) {\n      this.isLarge = true;\n      this.generalClasses.push('is-large');\n      if (this.lCols) this.gridClass = `nano-grid-${this.lCols}`;\n      this.isSizes.push({ size: 'l', active: true });\n    }\n\n    if (size > this.lSize) {\n      this.isXL = true;\n      this.generalClasses.push('is-xl');\n      if (this.xlCols) this.gridClass = `nano-grid-${this.xlCols}`;\n      this.isSizes.push({ size: 'xl', active: true });\n    }\n\n    if (size > this.xlSize) {\n      this.isXXL = true;\n      this.generalClasses.push('is-xxl');\n      if (this.xxlCols) this.gridClass = `nano-grid-${this.xxlCols}`;\n      this.isSizes.push({ size: 'xxl', active: true });\n    }\n\n    this.el.style.setProperty(\n      '--current-grid-size',\n      `'grid size: ${this.isSizes.slice().pop().size}'`\n    );\n    this.applyChildrenClasses();\n    setTimeout(() => (this.ready = true), 0);\n  }\n\n  private applyChildrenClasses() {\n    let gridItems = this.el.querySelectorAll('nano-grid-item');\n    if (gridItems.length) {\n      gridItems.forEach((gridItem: HTMLNanoGridItemElement) => {\n        gridItem.changeBP(this.isSizes);\n      });\n      return;\n    }\n\n    // this logic has been put into grid-item. Keep here for legacy for now\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>,\n      ctx: HTMLElement;\n\n    if (!CANSHADOW) ctx = this.el.querySelector('.grid') || this.el;\n    else ctx = this.el;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // loop through all grid items with states.\n    [].map.call(ctx.children, (gItem: HTMLElement) => {\n      if (!gItem.hasAttribute('grid-states')) return;\n\n      // gridItems.forEach(gItem => {\n\n      // clear all previous grid state classnames\n      classes = gItem.className\n        .split(' ')\n        .filter((c) => !c.startsWith('nano-grid-'));\n      gItem.className = classes.join(' ').trim();\n\n      // get all potential states this element can have\n      itemStates = gItem.getAttribute('grid-states').split(' ');\n\n      // loop through all potential state options: col & row span & start\n      STATEOPTS.forEach((stateOpt) => {\n        // reset found flag\n        found = false;\n\n        // loop through all the current valid breakpoints / sizes backwards because\n        // we only care about the item's state at the largest current breakpoint.\n        this.isSizes\n          .slice()\n          .reverse()\n          .forEach(function (size) {\n            if (found || !size) return;\n            found = itemStates.find(\n              (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n            );\n\n            // found a state at this current size. apply class.\n            if (found) {\n              // clear previous grid state classname\n              classes = gItem.className\n                .split(' ')\n                .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n              gItem.className = classes.join(' ').trim();\n\n              stateArr = found.split('-');\n\n              // remove the size of the state\n              stateArr.shift();\n              itemState = stateArr.join('-');\n\n              // add new class\n              gItem.classList.add(`nano-grid-${itemState}`);\n            }\n          });\n      });\n    });\n  }\n\n  connectedCallback() {\n    testLegacyStyle(this.el);\n  }\n\n  componentWillLoad() {\n    let wrapper: HTMLElement, ctx;\n\n    if (!CANSHADOW) ctx = this.el.querySelector('.grid') || this.el;\n    else ctx = this.el;\n\n    [].map.call(ctx.children, (ele: HTMLElement) => {\n      if (!CANSHADOW) {\n        if (\n          ele.classList.contains('nano-griditem') ||\n          ele.nodeName === 'NANO-GRID-ITEM'\n        )\n          return;\n\n        wrapper = document.createElement('div');\n        if (ele.hasAttribute('grid-states')) {\n          wrapper.setAttribute('grid-states', ele.getAttribute('grid-states'));\n          ele.removeAttribute('grid-states');\n        }\n\n        this.el.insertBefore(wrapper, ele);\n        wrapper.appendChild(ele);\n        wrapper.classList.add('nano-griditem');\n      } else if (ele.nodeName !== 'NANO-GRID-ITEM')\n        ele.classList.add('nano-griditem');\n    });\n  }\n\n  componentDidLoad() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (!entry.contentRect.width) return;\n        this.currentWidth = entry.contentRect.width;\n        this.applySizeClasses();\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    // console.log(this.currentWidth, this.generalClasses.join(' '), this.gridClass, this.showHelper, this.gridClass)\n    return (\n      <Host\n        class={{\n          [this.generalClasses.join(' ')]: true,\n          'has-grid': !!this.gridClass,\n          ready: this.ready,\n          [this.gridClass]: true,\n        }}\n        is-legacy={!CANSHADOW ? true : undefined}\n      >\n        <div\n          class={{\n            grid: true,\n          }}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n\n// <Host class={{\n//         [this.generalClasses.join(' ')]: true,\n//         [this.gridClass]: true,\n//         'helper': this.showHelper,\n//         'has-grid': !!this.gridClass,\n//         'legacy': !CANSHADOW,\n//         'content-panel': this.contentPanel,\n//         'full-height': this.fullHeight,\n//         'ready': this.ready\n//       }}></Host>\n",":host {\n  display: block;\n}\n","import { Component, h, Prop, Element, Method, Watch } from '@stencil/core';\nimport { GridSizes } from '../../interface';\n\nconst STATEOPTS = ['col-span', 'col-start', 'row-span', 'row-start'];\n\n/**\n * Grid items to be used with [grid](/story/nano-components-grid) elements\n */\n@Component({\n  tag: 'nano-grid-item',\n  styleUrl: 'grid-item.scss',\n  shadow: true,\n})\nexport class GridItem {\n  private currGridSizes: GridSizes[] = [null];\n\n  @Element() private el: HTMLNanoGridItemElement;\n  /**\n   * How to position this item within it's parent grid at different break points. Examples:\n   * xl-col-span-2\n   * l-col-start-2\n   * xxl-row-span-2\n   * m-row-start-2\n   */\n  @Prop() gridStates: string = '';\n\n  @Watch('gridStates')\n  updateGridClasses() {\n    this.applyChildrenClasses();\n  }\n\n  /**\n   * Called by parent grid to trigger new classes\n   * @internal\n   */\n  @Method()\n  async changeBP(newGridSizes: GridSizes[]) {\n    if (this.currGridSizes === newGridSizes) return;\n    this.currGridSizes = newGridSizes;\n\n    if (!this.gridStates.length) return;\n    this.applyChildrenClasses();\n  }\n\n  private applyChildrenClasses() {\n    let stateArr: Array<string> = [''],\n      itemState: string = '',\n      found: any,\n      itemStates: Array<string>,\n      classes: Array<string>;\n\n    // item states come in 4 possible flavours at every breakpoint. E.g.\n    // xl-col-span-2\n    // xl-col-start-2\n    // xl-row-span-2\n    // xl-row-start-2\n\n    // clear all previous grid state classnames\n    classes = this.el.className\n      .split(' ')\n      .filter((c) => !c.startsWith('nano-grid-'));\n    this.el.className = classes.join(' ').trim();\n\n    // get all potential states this element can have\n    itemStates = this.gridStates.split(' ');\n\n    // loop through all potential state options: col & row span & start\n    STATEOPTS.forEach((stateOpt) => {\n      // reset found flag\n      found = false;\n\n      // loop through all the current valid breakpoints / sizes backwards because\n      // we only care about the item's state at the largest current breakpoint.\n      this.currGridSizes\n        .slice()\n        .reverse()\n        .forEach((size) => {\n          if (found || !size) return;\n          found = itemStates.find(\n            (state) => state.indexOf(`${size.size}-${stateOpt}`) === 0\n          );\n\n          // found a state at this current size. apply class.\n          if (found) {\n            // clear previous grid state classname\n            classes = this.el.className\n              .split(' ')\n              .filter((c) => !c.includes('nano-grid-${stateOpt}'));\n            this.el.className = classes.join(' ').trim();\n\n            stateArr = found.split('-');\n\n            // remove the size of the state\n            stateArr.shift();\n            itemState = stateArr.join('-');\n\n            // add new class\n            this.el.classList.add(`nano-grid-${itemState}`);\n          }\n        });\n    });\n  }\n\n  render() {\n    return <slot />;\n  }\n}\n",":host {\n  /**\n   * @prop --padding: padding around any content. Only relevent on `<nano-img background>`\n  */\n  --padding: 0;\n\n  display: inline-block;\n  object-fit: cover;\n  object-position: center;\n  background-size: cover;\n  background-position: center;\n\n  * {\n    border-radius: inherit;\n  }\n}\n\n:host([background]:not([background='false'])) {\n  display: block;\n}\n\n.img {\n  position: relative;\n  min-height: inherit;\n  height: 100%;\n  display: block;\n  object-fit: inherit;\n  object-position: inherit;\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n}\n\n.img__loader,\n.img__observer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n}\n\n.img__image,\n.img__bg {\n  border-radius: inherit;\n  display: block;\n  opacity: 0;\n  transition: 0.5s ease opacity, 0.3s ease filter 0.4s;\n  filter: blur(5px);\n\n  &.loaded {\n    opacity: 1;\n    filter: blur(0.1px);\n\n    @media not all and (min-resolution: 0.001dpcm) {\n      @supports (-webkit-appearance: none) {\n        filter: blur(0);\n      }\n    }\n  }\n}\n\n.img__image {\n  object-fit: inherit;\n  object-position: inherit;\n  max-width: 100%;\n  height: auto;\n\n  &.hide {\n    visibility: hidden;\n\n    &.no-height {\n      height: 1px;\n      position: absolute;\n      z-index: -1;\n    }\n  }\n}\n\n.img__bg {\n  background-color: inherit;\n  background-position: inherit;\n  background-size: inherit;\n  background-origin: inherit;\n  background-attachment: inherit;\n  background-repeat: inherit;\n  overflow: auto;\n  padding: var(--padding);\n\n  &.no-height {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from '../../interface';\n\n/**\n * Img with benefits. Lazy loading. Simple `srcSet` solution for both `<img>` and `background-image` varieties.\n * @slot - Main slot. Only relevant with `<nano-img background>`\n */\n@Component({\n  tag: 'nano-img',\n  styleUrl: 'img.scss',\n  shadow: true,\n})\nexport class Img implements ComponentInterface {\n  private io?: IntersectionObserver;\n  private _srcSet: { [key: string]: { src: string; active: boolean } } = {};\n\n  @Element() host!: HTMLNanoImgElement;\n\n  @State() loadSrc?: string;\n  @State() loadError?: () => void;\n  @State() hasLoaded: boolean = false;\n  @State() imgStates: string = null;\n  @State() _src: string;\n  @Watch('_src')\n  _srcChanged() {\n    this.hasLoaded = false;\n    this.addIO();\n  }\n\n  /** This attribute defines the alternative text describing the image.\n   * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */\n  @Prop() alt?: string;\n\n  /** The image URL. This attribute is mandatory for the `<img>` element. */\n  @Prop() src!: string;\n  @Watch('src')\n  srcChanged() {\n    this._src = this.src;\n  }\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() srcSet?: string;\n  @Watch('srcSet')\n  srcSetChanged() {\n    if (!this.srcSet) return;\n\n    delete this._srcSet;\n    this._srcSet = {};\n\n    this.imgStates = this.srcSet\n      .split(',')\n      .map((bpSrc) => {\n        const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);\n        this._srcSet[bp] = { src: src, active: false };\n        return bp;\n      })\n      .join(', ');\n  }\n\n  /** Render image lazily, when it comes into the browser viewport **/\n  @Prop() lazy: boolean = true;\n  @Watch('lazy')\n  lazyChanged() {\n    if (!this.lazy) this.load();\n  }\n\n  /** Render the image as a background image **/\n  @Prop() background?: boolean;\n\n  /** When the image is rendered as a background, and there is no preset dimensions of the component,\n   * you can set how the component height will be set. Via image size or via the content **/\n  @Prop() autoHeight: 'content' | 'image' = 'content';\n\n  /** Emitted when the img src has been set */\n  @Event() nanoImgWillLoad!: EventEmitter<void>;\n\n  /** Emitted when the image has finished loading */\n  @Event() nanoImgDidLoad!: EventEmitter<void>;\n\n  /** Emitted when the img fails to load */\n  @Event() nanoImgError!: EventEmitter<void>;\n\n  private addIO() {\n    if (!this._src || this.hasLoaded) return;\n    if (!this.lazy) {\n      this.load();\n      return;\n    }\n    if (\n      typeof (window as any) !== 'undefined' &&\n      'IntersectionObserver' in window &&\n      'isIntersecting' in window.IntersectionObserverEntry.prototype\n    ) {\n      this.removeIO();\n      this.io = new IntersectionObserver((data) => {\n        if (data[0].isIntersecting) {\n          this.load();\n          this.removeIO();\n        }\n      });\n\n      this.io.observe(this.host);\n    } else setTimeout(() => this.load(), 200);\n  }\n\n  private load() {\n    this.loadError = this.onError;\n    this.loadSrc = this._src;\n    this.nanoImgWillLoad.emit();\n  }\n\n  private onLoad = () => {\n    this.nanoImgDidLoad.emit();\n    setTimeout(() => (this.hasLoaded = true), 50);\n  };\n\n  private onError = () => {\n    this.nanoImgError.emit();\n  };\n\n  private onResize = (e: { detail: ResizeStateChangeEventDetail }) => {\n    Object.entries(e.detail).forEach(([bp, active]) => {\n      this._srcSet[bp].active = active;\n    });\n\n    // sort and find the highest sized matching image.\n    const srcOpts = [];\n    Object.keys(this._srcSet)\n      .sort()\n      .forEach((bp) => {\n        if (this._srcSet[bp].active) srcOpts.push(this._srcSet[bp].src);\n      });\n\n    if (srcOpts.length) this._src = srcOpts.slice(-1)[0];\n    // no matching image? Set back to default\n    else this._src = this.src;\n  };\n\n  private removeIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  connectedCallback() {\n    this.srcChanged();\n    this.srcSetChanged();\n    this.lazyChanged();\n  }\n\n  componentDidLoad() {\n    this.addIO();\n  }\n\n  disconnectedCallback() {\n    this.removeIO();\n  }\n\n  render() {\n    const bgStyle = !!this.loadSrc\n      ? { 'background-image': `url(${this.loadSrc})` }\n      : {};\n    return (\n      <div class=\"img\">\n        <nano-skeleton class=\"img__loader\"></nano-skeleton>\n        {!!this.background && (\n          <div\n            class={{\n              loaded: this.hasLoaded,\n              img__bg: true,\n              'no-height': this.autoHeight === 'image',\n            }}\n            style={bgStyle}\n          >\n            <slot />\n          </div>\n        )}\n        <img\n          class={{\n            img__image: true,\n            loaded: this.hasLoaded,\n            hide: this.background,\n            'no-height': this.autoHeight === 'content',\n          }}\n          decoding=\"async\"\n          src={this.loadSrc}\n          alt={this.alt}\n          onLoad={this.onLoad}\n          onError={this.loadError}\n        />\n        <nano-resize-observe\n          class=\"img__observer\"\n          onNanoResizeStateChange={this.onResize}\n          states={this.imgStates}\n        />\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-e24d3e8a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/range/range.tsx","src/components/range/range.scss?tag=nano-range&encapsulation=scoped"],"names":["Range","[object Object]","hostRef","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","nanoChange","debounceEvent","updateRatio","gesture","enable","debounceChanged","disabledChanged","destroy","undefined","rangeSlider","__sc_import_nano_components","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","nanoStyle","interactive","interactive-disabled","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","getValue","shadowRoot","knobEl","querySelector","focus","isRTL","start","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","onKeyDown","key","preventDefault","stopPropagation","range-knob-handle","range-knob-a","range-knob-b","range-knob-pressed","range-knob-min","range-knob-max","knobStyle","tabindex","aria-valuemin","aria-valuemax","aria-disabled","aria-valuenow","round"],"mappings":"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","sourcesContent":["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","@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"]}

package/dist/nano-components/p-e2848c8a.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,n,o,t){function c(e){return e instanceof o?e:new o((function(n){n(e)}))}return new(o||(o=Promise))((function(o,a){function r(e){try{s(t.next(e))}catch(n){a(n)}}function i(e){try{s(t["throw"](e))}catch(n){a(n)}}function s(e){e.done?o(e.value):c(e.value).then(r,i)}s((t=t.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var o={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},t,c,a,r;return r={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function i(e){return function(n){return s([e,n])}}function s(r){if(t)throw new TypeError("Generator is already executing.");while(o)try{if(t=1,c&&(a=r[0]&2?c["return"]:r[0]?c["throw"]||((a=c["return"])&&a.call(c),0):c.next)&&!(a=a.call(c,r[1])).done)return a;if(c=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:o.label++;return{value:r[1],done:false};case 5:o.label++;c=r[1];r=[0];continue;case 7:r=o.ops.pop();o.trys.pop();continue;default:if(!(a=o.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){o=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){o.label=r[1];break}if(r[0]===6&&o.label<a[1]){o.label=a[1];a=r;break}if(a&&o.label<a[2]){o.label=a[2];o.ops.push(r);break}if(a[2])o.ops.pop();o.trys.pop();continue}r=n.call(e,o)}catch(i){r=[6,i];c=0}finally{t=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-2d59dda3.system.js","./p-a057ad2d.system.js","./p-b346b2cb.system.js"],(function(e){"use strict";var n,o,t,c,a,r,i;return{setters:[function(e){n=e.r;o=e.c;t=e.h;c=e.e;a=e.g},function(e){r=e.c},function(e){i=e.f}],execute:function(){var s='.sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#0084a9;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104, 117, 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';var b=0;var h=e("nano_checkbox",function(){function e(e){var t=this;n(this,e);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId="nano-cb-"+b++;this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.required=false;this.type="checkbox";this.indeterminate=false;this.invalid=false;this.handleChange=function(e){t.checked=e.target.checked;t.indeterminate=false};this.handleFocus=function(){t.hasFocus=true;t.nanoFocus.emit()};this.handleBlur=function(){t.hasFocus=false;t.nanoBlur.emit()}}e.prototype.handleCheckedChange=function(){return __awaiter(this,void 0,void 0,(function(){var e,n;var o=this;return __generator(this,(function(t){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){e=this.host.closest("form");n=void 0;if(e){n=Array.from(e.querySelectorAll('nano-checkbox[name="'+this.name+'"]'))}else{n=Array.from(document.querySelectorAll('nano-checkbox[name="'+this.name+'"]')).filter((function(e){return!e.closest("form")}))}n.map((function(e){if(e!==o.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked});return[2]}))}))};e.prototype.typeChange=function(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"};e.prototype.handleIndeterminateChange=function(){this.checked=false;this.input.indeterminate=this.indeterminate};e.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input)return[2,this.input];return[2]}))}))};e.prototype.reportError=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.input.reportValidity()]}))}))};e.prototype.setError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(!this.input)return[2];this.input.setCustomValidity(e);return[2]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input){this.input.focus();i.force(this.input)}return[2]}))}))};e.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input){this.input.blur();i.force(this.input,false)}return[2]}))}))};e.prototype.handleInvalid=function(e){this.invalid=!e.target.validity.valid};e.prototype.isRadioChecked=function(){var e=this;setTimeout((function(){return e.checked=e.input.checked}),20)};e.prototype.componentWillLoad=function(){this.typeChange()};e.prototype.componentDidLoad=function(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)};e.prototype.disconnectedCallback=function(){i.unobserve(this.input)};e.prototype.render=function(){var e=this;var n=this.inputId+"-lbl";var o=this.host.ownerDocument.dir==="rtl";return t(c,{class:Object.assign({},r(this.color)),dir:o?"rtl":null},t("label",{class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},t("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:function(n){return e.input=n},id:this.inputId,onInvalid:this.handleInvalid}),t("span",{class:"nanocb__input nanocb__input--"+this.type}),t("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&t("span",null,this.label),t("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}},enumerable:false,configurable:true});return e}());h.style=s}}}));
-//# sourceMappingURL=p-e2848c8a.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"names":["checkboxCss","checkboxIds","Checkbox","exports","class_1","hostRef","_this","this","inputId","inputType","hasFocus","checked","disabled","value","required","type","indeterminate","invalid","handleChange","ev","target","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","prototype","handleCheckedChange","input","name","form","host","closest","radios","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","typeChange","handleIndeterminateChange","getInputElement","reportError","reportValidity","setError","message","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","handleInvalid","validity","valid","isRadioChecked","setTimeout","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","isRtl","ownerDocument","dir","h","Host","class","Object","assign","createColorClasses","color","nanocb","nanocb--checked","nanocb--disabled","nanocb--focused","nanocb--indeterminate","htmlFor","aria-labelledby","onBlur","onFocus","onChange","ref","id","onInvalid","label","length"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n\n:host {\n  /**\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{$color-white};\n   * @prop --check-border-style: Initial border style. Defaults to 1px solid #{$color-palegrey};\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{$color-darkgrey};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{$color-darkgrey};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{$color-white};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list($color-lightblue)};\n   * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n   * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{$color-blue};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --padding: initial;\n  --check-bg-color: #{$color-white};\n  --check-border-style: 1px solid #{$color-palegrey};\n  --check-checked-bg-color: #{$color-darkgrey};\n  --check-checked-border-color: #{$color-darkgrey};\n  --check-checked-higlight-color: #{$color-white};\n  --check-base-size: inherit;\n\n  // type specific\n\n  --tagbox-rgb: #{color-to-rgb-list($color-lightblue)};\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n  --tagbox-border-radius: 0;\n  --segment-color: #{$color-blue};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-style: 1px solid #{rgba($color-palegrey, 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list($color-mediumgrey)};\n  --check-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --check-checked-bg-color: #{rgba($color-mediumgrey, 0.5)};\n  --segment-color: #{$color-darkgrey};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &__input {\n    @include border-radius(var(--cb-border-radius, 3px));\n\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n    &::before {\n      @include border-radius(var(--cb-border-radius));\n\n      position: absolute;\n      content: '';\n      left: 0.625em;\n      top: 0.625em;\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      @include border-radius(var(--radio-border-radius));\n\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        @include border-radius(var(--cb-border-radius));\n\n        position: absolute;\n        content: '';\n        left: 0.75em;\n        top: 0.75em;\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em 0;\n        }\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      @include border-radius(var(--cb-border-radius));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-border-color);\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n      }\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        border-width: 0.3125em;\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          left: 0.475em;\n          top: 0.1875em;\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n    }\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      @include border-radius(var(--input-border-radius, 5px));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        left: 0.3125em;\n        top: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  &__label {\n    @include padding(0, 0, 0, 10px);\n\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      @include ltr-host(':first-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n        border-right: none;\n      }\n\n      @include rtl-host(':first-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n        border-left: none;\n      }\n      // middle\n      @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n        border-radius: 0 0 0 0;\n        border-right: none;\n      }\n\n      @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n        border-left: none;\n      }\n      // last\n      @include ltr-host(':last-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n      }\n\n      @include rtl-host(':last-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n      }\n      // single\n      @include host(':first-of-type:last-of-type') {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 500;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n\n        @include margin(0, 0, 0, 0.3125em);\n\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Checks for validity and shows the browser's validation message if the control is invalid.\n   */\n  @Method()\n  async reportError() {\n    return this.input.reportValidity();\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string) {\n    if (!this.input) return;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  // private handlers\n\n  private handleInvalid(ev: Event) {\n    this.invalid = !(ev.target as HTMLInputElement).validity.valid;\n  }\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    setTimeout(() => (this.checked = this.input.checked), 20);\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <slot />\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-e33dd8b9.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/@stencil/core/internal/client/shadow-css.js"],"names":["_cssColonHostRe","_cssColonHostContextRe","_cssColonSlottedRe","_polyfillHostNoCombinatorRe","_shadowDOMSelectorsRe","_polyfillHostRe","_colonHostRe","_colonSlottedRe","_colonHostContextRe","_commentRe","_commentWithHashRe","_ruleRe","_curlyRe","processRules","input","ruleCallback","inputWithEscapedBlocks","escapeBlocks","nextBlockIndex","escapedString","replace","m","selector","content","suffix","contentPrefix","startsWith","blocks","substring","BLOCK_PLACEHOLDER","rule","inputParts","split","resultParts","escapedBlocks","bracketCount","currentBlockParts","partIndex","length","part","push","join","convertColonRule","cssText","regExp","partReplacer","parts","r","i","p","trim","_polyfillHost","colonHostPartReplacer","host","colonHostContextPartReplacer","indexOf","scopeSelectors","scopeSelectorText","hostSelector","slotSelector","map","shallowPart","scopeSelector","RegExp","makeScopeMatcher","test","selectorNeedsScoping","className","_","_scopeSelectorPart","scopedP","lastIndex","replaceBy","before","colon","after","applySimpleSelectorScope","t","matches","match","safeContent","placeholders","index","keep","pseudo","exp","safeSelector","res","scopedSelector","startIndex","sep","shouldScope","exec","separator","slice","restoreSafeSelector","applyStrictSelectorScope","scopeCss","scopeId","commentOriginalSelector","hostScopeId","slotScopeId","commentsWithHash","extractCommentsWithHash","stripComments","orgSelectors","processCommentedSelector","placeholder","comment","scoped","slotted","slotClass","selectors","compound","slottedSelector","prefixSelector","char","orgSelector","addedSelector","trimRight","updatedSelector","convertColonSlotted","convertColonHostContext","convertColonHost","insertPolyfillHostInCssText","reduce","result","pattern","convertShadowDOMSelectors","slottedSelectors","scopeCssText","forEach"],"mappings":"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","sourcesContent":["/*\n Stencil Client Platform v2.5.9 | MIT Licensed | https://stenciljs.com\n */\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n *\n * This file is a port of shadowCSS from webcomponents.js to TypeScript.\n * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js\n * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts\n */\nconst safeSelector = (selector) => {\n    const placeholders = [];\n    let index = 0;\n    let content;\n    // Replaces attribute selectors with placeholders.\n    // The WS in [attr=\"va lue\"] would otherwise be interpreted as a selector separator.\n    selector = selector.replace(/(\\[[^\\]]*\\])/g, (_, keep) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(keep);\n        index++;\n        return replaceBy;\n    });\n    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.\n    // WS and \"+\" would otherwise be interpreted as selector separators.\n    content = selector.replace(/(:nth-[-\\w]+)(\\([^)]+\\))/g, (_, pseudo, exp) => {\n        const replaceBy = `__ph-${index}__`;\n        placeholders.push(exp);\n        index++;\n        return pseudo + replaceBy;\n    });\n    const ss = {\n        content,\n        placeholders,\n    };\n    return ss;\n};\nconst restoreSafeSelector = (placeholders, content) => {\n    return content.replace(/__ph-(\\d+)__/g, (_, index) => placeholders[+index]);\n};\nconst _polyfillHost = '-shadowcsshost';\nconst _polyfillSlotted = '-shadowcssslotted';\n// note: :host-context pre-processed to -shadowcsshostcontext.\nconst _polyfillHostContext = '-shadowcsscontext';\nconst _parenSuffix = ')(?:\\\\((' + '(?:\\\\([^)(]*\\\\)|[^)(]*)+?' + ')\\\\))?([^,{]*)';\nconst _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');\nconst _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');\nconst _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');\nconst _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';\nconst _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\\s]*)/;\nconst _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];\nconst _selectorReSuffix = '([>\\\\s~+[.,{:][\\\\s\\\\S]*)?$';\nconst _polyfillHostRe = /-shadowcsshost/gim;\nconst _colonHostRe = /:host/gim;\nconst _colonSlottedRe = /::slotted/gim;\nconst _colonHostContextRe = /:host-context/gim;\nconst _commentRe = /\\/\\*\\s*[\\s\\S]*?\\*\\//g;\nconst stripComments = (input) => {\n    return input.replace(_commentRe, '');\n};\nconst _commentWithHashRe = /\\/\\*\\s*#\\s*source(Mapping)?URL=[\\s\\S]+?\\*\\//g;\nconst extractCommentsWithHash = (input) => {\n    return input.match(_commentWithHashRe) || [];\n};\nconst _ruleRe = /(\\s*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;))/g;\nconst _curlyRe = /([{}])/g;\nconst OPEN_CURLY = '{';\nconst CLOSE_CURLY = '}';\nconst BLOCK_PLACEHOLDER = '%BLOCK%';\nconst processRules = (input, ruleCallback) => {\n    const inputWithEscapedBlocks = escapeBlocks(input);\n    let nextBlockIndex = 0;\n    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {\n        const selector = m[2];\n        let content = '';\n        let suffix = m[4];\n        let contentPrefix = '';\n        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {\n            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];\n            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);\n            contentPrefix = '{';\n        }\n        const cssRule = {\n            selector,\n            content,\n        };\n        const rule = ruleCallback(cssRule);\n        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;\n    });\n};\nconst escapeBlocks = (input) => {\n    const inputParts = input.split(_curlyRe);\n    const resultParts = [];\n    const escapedBlocks = [];\n    let bracketCount = 0;\n    let currentBlockParts = [];\n    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {\n        const part = inputParts[partIndex];\n        if (part === CLOSE_CURLY) {\n            bracketCount--;\n        }\n        if (bracketCount > 0) {\n            currentBlockParts.push(part);\n        }\n        else {\n            if (currentBlockParts.length > 0) {\n                escapedBlocks.push(currentBlockParts.join(''));\n                resultParts.push(BLOCK_PLACEHOLDER);\n                currentBlockParts = [];\n            }\n            resultParts.push(part);\n        }\n        if (part === OPEN_CURLY) {\n            bracketCount++;\n        }\n    }\n    if (currentBlockParts.length > 0) {\n        escapedBlocks.push(currentBlockParts.join(''));\n        resultParts.push(BLOCK_PLACEHOLDER);\n    }\n    const strEscapedBlocks = {\n        escapedString: resultParts.join(''),\n        blocks: escapedBlocks,\n    };\n    return strEscapedBlocks;\n};\nconst insertPolyfillHostInCssText = (selector) => {\n    selector = selector\n        .replace(_colonHostContextRe, _polyfillHostContext)\n        .replace(_colonHostRe, _polyfillHost)\n        .replace(_colonSlottedRe, _polyfillSlotted);\n    return selector;\n};\nconst convertColonRule = (cssText, regExp, partReplacer) => {\n    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule\n    return cssText.replace(regExp, (...m) => {\n        if (m[2]) {\n            const parts = m[2].split(',');\n            const r = [];\n            for (let i = 0; i < parts.length; i++) {\n                const p = parts[i].trim();\n                if (!p)\n                    break;\n                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));\n            }\n            return r.join(',');\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n};\nconst colonHostPartReplacer = (host, part, suffix) => {\n    return host + part.replace(_polyfillHost, '') + suffix;\n};\nconst convertColonHost = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);\n};\nconst colonHostContextPartReplacer = (host, part, suffix) => {\n    if (part.indexOf(_polyfillHost) > -1) {\n        return colonHostPartReplacer(host, part, suffix);\n    }\n    else {\n        return host + part + suffix + ', ' + part + ' ' + host + suffix;\n    }\n};\nconst convertColonSlotted = (cssText, slotScopeId) => {\n    const slotClass = '.' + slotScopeId + ' > ';\n    const selectors = [];\n    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {\n        if (m[2]) {\n            const compound = m[2].trim();\n            const suffix = m[3];\n            const slottedSelector = slotClass + compound + suffix;\n            let prefixSelector = '';\n            for (let i = m[4] - 1; i >= 0; i--) {\n                const char = m[5][i];\n                if (char === '}' || char === ',') {\n                    break;\n                }\n                prefixSelector = char + prefixSelector;\n            }\n            const orgSelector = prefixSelector + slottedSelector;\n            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;\n            if (orgSelector.trim() !== addedSelector.trim()) {\n                const updatedSelector = `${addedSelector}, ${orgSelector}`;\n                selectors.push({\n                    orgSelector,\n                    updatedSelector,\n                });\n            }\n            return slottedSelector;\n        }\n        else {\n            return _polyfillHostNoCombinator + m[3];\n        }\n    });\n    return {\n        selectors,\n        cssText,\n    };\n};\nconst convertColonHostContext = (cssText) => {\n    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);\n};\nconst convertShadowDOMSelectors = (cssText) => {\n    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);\n};\nconst makeScopeMatcher = (scopeSelector) => {\n    const lre = /\\[/g;\n    const rre = /\\]/g;\n    scopeSelector = scopeSelector.replace(lre, '\\\\[').replace(rre, '\\\\]');\n    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');\n};\nconst selectorNeedsScoping = (selector, scopeSelector) => {\n    const re = makeScopeMatcher(scopeSelector);\n    return !re.test(selector);\n};\nconst applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {\n    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()\n    _polyfillHostRe.lastIndex = 0;\n    if (_polyfillHostRe.test(selector)) {\n        const replaceBy = `.${hostSelector}`;\n        return selector\n            .replace(_polyfillHostNoCombinatorRe, (_, selector) => {\n            return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {\n                return before + replaceBy + colon + after;\n            });\n        })\n            .replace(_polyfillHostRe, replaceBy + ' ');\n    }\n    return scopeSelector + ' ' + selector;\n};\nconst applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {\n    const isRe = /\\[is=([^\\]]*)\\]/g;\n    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);\n    const className = '.' + scopeSelector;\n    const _scopeSelectorPart = (p) => {\n        let scopedP = p.trim();\n        if (!scopedP) {\n            return '';\n        }\n        if (p.indexOf(_polyfillHostNoCombinator) > -1) {\n            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);\n        }\n        else {\n            // remove :host since it should be unnecessary\n            const t = p.replace(_polyfillHostRe, '');\n            if (t.length > 0) {\n                const matches = t.match(/([^:]*)(:*)(.*)/);\n                if (matches) {\n                    scopedP = matches[1] + className + matches[2] + matches[3];\n                }\n            }\n        }\n        return scopedP;\n    };\n    const safeContent = safeSelector(selector);\n    selector = safeContent.content;\n    let scopedSelector = '';\n    let startIndex = 0;\n    let res;\n    const sep = /( |>|\\+|~(?!=))\\s*/g;\n    // If a selector appears before :host it should not be shimmed as it\n    // matches on ancestor elements and not on elements in the host's shadow\n    // `:host-context(div)` is transformed to\n    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`\n    // the `div` is not part of the component in the 2nd selectors and should not be scoped.\n    // Historically `component-tag:host` was matching the component so we also want to preserve\n    // this behavior to avoid breaking legacy apps (it should not match).\n    // The behavior should be:\n    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)\n    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a\n    //   `:host-context(tag)`)\n    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;\n    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present\n    let shouldScope = !hasHost;\n    while ((res = sep.exec(selector)) !== null) {\n        const separator = res[1];\n        const part = selector.slice(startIndex, res.index).trim();\n        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;\n        scopedSelector += `${scopedPart} ${separator} `;\n        startIndex = sep.lastIndex;\n    }\n    const part = selector.substring(startIndex);\n    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;\n    // replace the placeholders with their original values\n    return restoreSafeSelector(safeContent.placeholders, scopedSelector);\n};\nconst scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {\n    return selector\n        .split(',')\n        .map((shallowPart) => {\n        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {\n            return shallowPart.trim();\n        }\n        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {\n            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();\n        }\n        else {\n            return shallowPart.trim();\n        }\n    })\n        .join(', ');\n};\nconst scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {\n    return processRules(cssText, (rule) => {\n        let selector = rule.selector;\n        let content = rule.content;\n        if (rule.selector[0] !== '@') {\n            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);\n        }\n        else if (rule.selector.startsWith('@media') ||\n            rule.selector.startsWith('@supports') ||\n            rule.selector.startsWith('@page') ||\n            rule.selector.startsWith('@document')) {\n            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);\n        }\n        const cssRule = {\n            selector: selector.replace(/\\s{2,}/g, ' ').trim(),\n            content,\n        };\n        return cssRule;\n    });\n};\nconst scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {\n    cssText = insertPolyfillHostInCssText(cssText);\n    cssText = convertColonHost(cssText);\n    cssText = convertColonHostContext(cssText);\n    const slotted = convertColonSlotted(cssText, slotScopeId);\n    cssText = slotted.cssText;\n    cssText = convertShadowDOMSelectors(cssText);\n    if (scopeId) {\n        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);\n    }\n    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);\n    cssText = cssText.replace(/>\\s*\\*\\s+([^{, ]+)/gm, ' $1 ');\n    return {\n        cssText: cssText.trim(),\n        slottedSelectors: slotted.selectors,\n    };\n};\nconst scopeCss = (cssText, scopeId, commentOriginalSelector) => {\n    const hostScopeId = scopeId + '-h';\n    const slotScopeId = scopeId + '-s';\n    const commentsWithHash = extractCommentsWithHash(cssText);\n    cssText = stripComments(cssText);\n    const orgSelectors = [];\n    if (commentOriginalSelector) {\n        const processCommentedSelector = (rule) => {\n            const placeholder = `/*!@___${orgSelectors.length}___*/`;\n            const comment = `/*!@${rule.selector}*/`;\n            orgSelectors.push({ placeholder, comment });\n            rule.selector = placeholder + rule.selector;\n            return rule;\n        };\n        cssText = processRules(cssText, (rule) => {\n            if (rule.selector[0] !== '@') {\n                return processCommentedSelector(rule);\n            }\n            else if (rule.selector.startsWith('@media') ||\n                rule.selector.startsWith('@supports') ||\n                rule.selector.startsWith('@page') ||\n                rule.selector.startsWith('@document')) {\n                rule.content = processRules(rule.content, processCommentedSelector);\n                return rule;\n            }\n            return rule;\n        });\n    }\n    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);\n    cssText = [scoped.cssText, ...commentsWithHash].join('\\n');\n    if (commentOriginalSelector) {\n        orgSelectors.forEach(({ placeholder, comment }) => {\n            cssText = cssText.replace(placeholder, comment);\n        });\n    }\n    scoped.slottedSelectors.forEach((slottedSelector) => {\n        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);\n    });\n    return cssText;\n};\n\nexport { scopeCss };\n"]}

package/dist/nano-components/p-e886b71e.system.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["node_modules/stencil-wormhole/dist/esm/deferred.js","node_modules/stencil-wormhole/dist/esm/consumer.js","src/components/algolia/algolia-data.tsx"],"names":["createDeferredPromise","resolve","promise","Promise","res","openWormhole","Component","props","ComponentPrototype","prototype","componentWillLoad","_this","this","el","getElement","onOpen","event","CustomEvent","bubbles","composed","detail","consumer","fields","updater","prop","value","dispatchEvent","then","call","SearchChangeEvent","exports","Wormhole"],"mappings":"gJAAO,IAAIA,EAAwB,WAC/B,IAAIC,EACJ,IAAIC,EAAU,IAAIC,SAAQ,SAAUC,GAAOH,EAAUG,KACrD,MAAO,CAAEF,QAASA,EAASD,QAASA,ICDjC,IAAII,EAAe,SAAUC,EAAWC,GAC3C,IAAIC,EAAqBF,EAAUG,UACnC,IAAIC,EAAoBF,EAAmBE,kBAC3CF,EAAmBE,kBAAoB,WACnC,IAAIC,EAAQC,KACZ,IAAIC,EAAKC,EAAWF,MACpB,IAAIG,EAASf,IACb,IAAIgB,EAAQ,IAAIC,YAAY,eAAgB,CACxCC,QAAS,KACTC,SAAU,KACVC,OAAQ,CACJC,SAAUT,KACVU,OAAQf,EACRgB,QAAS,SAAUC,EAAMC,GAASd,EAAMa,GAAQC,GAChDV,OAAQA,KAGhBF,EAAGa,cAAcV,GACjB,OAAOD,EAAOb,QAAQyB,MAAK,WACvB,GAAIjB,EAAmB,CACnB,OAAOA,EAAkBkB,KAAKjB,aCjBlCkB,GAAZ,SAAYA,GACVA,EAAA,UAAA,SACAA,EAAA,QAAA,OACAA,EAAA,WAAA,UACAA,EAAA,QAAA,QAJF,CAAYA,IAAAA,EAAiBC,EAAA,IAAA,UA0BhBC,EAAQD,EAAA,KAAG,SACtBxB,EACAC,GACG,OAAAF,EAAaC,EAAWC","sourcesContent":["export var createDeferredPromise = function () {\n    var resolve;\n    var promise = new Promise(function (res) { resolve = res; });\n    return { promise: promise, resolve: resolve };\n};\n","import { getElement } from \"@stencil/core\";\nimport { createDeferredPromise } from \"./deferred\";\nexport var openWormhole = function (Component, props) {\n    var ComponentPrototype = Component.prototype;\n    var componentWillLoad = ComponentPrototype.componentWillLoad;\n    ComponentPrototype.componentWillLoad = function () {\n        var _this = this;\n        var el = getElement(this);\n        var onOpen = createDeferredPromise();\n        var event = new CustomEvent('openWormhole', {\n            bubbles: true,\n            composed: true,\n            detail: {\n                consumer: this,\n                fields: props,\n                updater: function (prop, value) { _this[prop] = value; },\n                onOpen: onOpen,\n            },\n        });\n        el.dispatchEvent(event);\n        return onOpen.promise.then(function () {\n            if (componentWillLoad) {\n                return componentWillLoad.call(_this);\n            }\n        });\n    };\n};\n","import { openWormhole, WormholeConsumerConstructor } from 'stencil-wormhole';\nimport { SearchIndex as AlgoliaIndex } from 'algoliasearch';\nimport { IndexResult, AlgoliaResultHit, SearchIndex } from '../../interface';\nimport { StorageMethods } from '../../utils/store/component-store';\n\nexport enum SearchChangeEvent {\n  Filter = 'filter',\n  Page = 'page',\n  Replica = 'replica',\n  Init = 'init',\n}\n\nexport interface WormholeState {\n  indexResults: IndexResult;\n  filterChanged?: string;\n  facets?: {\n    [prop: string]: {\n      [prop: string]: number;\n    };\n  };\n  results: AlgoliaResultHit[];\n  resultsPage: number;\n  tplRenderFn?: (...args: any[]) => string;\n  changeEvent: SearchChangeEvent;\n  algoliaIndex: AlgoliaIndex;\n  searchIndex: SearchIndex;\n  browseIndex: boolean;\n  globalStoreMethod: StorageMethods;\n  isLoading: boolean;\n}\n\nexport const Wormhole = (\n  Component: WormholeConsumerConstructor,\n  props: (keyof WormholeState)[]\n) => openWormhole(Component, props);\n\nexport * from 'stencil-wormhole';\n"]}

package/dist/nano-components/p-e8a97250.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(n,o,e,r){function t(n){return n instanceof e?n:new e((function(o){o(n)}))}return new(e||(e=Promise))((function(e,i){function a(n){try{c(r.next(n))}catch(o){i(o)}}function s(n){try{c(r["throw"](n))}catch(o){i(o)}}function c(n){n.done?e(n.value):t(n.value).then(a,s)}c((r=r.apply(n,o||[])).next())}))};var __generator=this&&this.__generator||function(n,o){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,t,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(n){return function(o){return c([n,o])}}function c(a){if(r)throw new TypeError("Generator is already executing.");while(e)try{if(r=1,t&&(i=a[0]&2?t["return"]:a[0]?t["throw"]||((i=t["return"])&&i.call(t),0):t.next)&&!(i=i.call(t,a[1])).done)return i;if(t=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;t=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){e.label=a[1];break}if(a[0]===6&&e.label<i[1]){e.label=i[1];i=a;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(a);break}if(i[2])e.ops.pop();e.trys.pop();continue}a=o.call(n,e)}catch(s){a=[6,s];t=0}finally{r=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-22b50344.system.js","./p-a057ad2d.system.js"],(function(n){"use strict";var o,e,r,t,i,a,s,c;return{setters:[function(n){o=n.r;e=n.c;r=n.j;t=n.h;i=n.e;a=n.g},function(n){s=n.d},function(n){c=n.g}],execute:function(){var l='.sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:0;--control-margin-bottom:0;--control-margin-start:0;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #687576);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0;--control-margin-end:10px;--control-margin-bottom:0;--control-margin-start:0}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';var h=n("nano_checkbox_group",function(){function n(n){var r=this;o(this,n);this.nanoValidate=e(this,"nanoValidate",7);this.grpId="nano-checkbox-group-"+u++;this.errorMessage="";this.showErrorMsg=false;this.hasHelperSlot=false;this.validateOn="submit";this.showInlineError=true;this.min=0;this.max=null;this.disabled=null;this.legend="";this.handleInvalid=function(n){r.invalid=true;if(r.validateOn==="submit"){r.invalid=r.showErrorMsg=r.customValidate()}if(!!r.showInlineError)n.preventDefault();setTimeout((function(o){return r.showInlineValidation(n)}),20)};this.showInlineValidation=function(n){if(!r.nativeCbs||!r.nativeCbs.length)return;if(r.validateOn==="submitThenDirty")r.validateOn="dirty";r.showErrorMsg=false;r.invalid=false;r.nativeCbs.forEach((function(n,o){if(!n.validity.valid){r.errorMessage=n.validationMessage;r.showErrorMsg=true;r.invalid=true;if(!!r.showInlineError)r.checkboxes[o].setFocus()}}));r.nanoValidate.emit({isValid:!r.invalid,errorMessage:r.errorMessage,originalEvent:n})}}n.prototype.reportValidity=function(n){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){if(n)this.showInlineValidation();return[2,{isValid:!this.invalid,errorMessage:this.errorMessage}]}))}))};n.prototype.handleCbChange=function(){if(this.invalid)this.showErrorMsg=this.invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()};n.prototype.customValidate=function(){var n=this;if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;var o=this.nativeCbs.filter((function(n){return n.type==="checkbox"}));if(!o||!o.length)return;var e=o.filter((function(n){return n.checked})).length;var r=false;this.checkboxes.forEach((function(o){o.setError("");if(r)return;if(n.min&&e<n.min){o.setError("You must select a minimum of "+n.min+" values.");r=true}if(n.max&&e>n.max){o.setError("Only up to "+n.max+" values are allowed.");r=true}}));return r};n.prototype.handleComponentChange=function(){this.checkboxTypes=c(this.checkboxes.map((function(n){return"types-"+n.type})))};n.prototype.handleDisabledChange=function(){var n=this;if(this.disabled===null)return;this.checkboxes.map((function(o){return o.disabled=n.disabled}))};n.prototype.attachSlotObserver=function(){var n=this;var o=this.mo=new MutationObserver((function(){return n.handleSlotChange()}));o.observe(this.host,{childList:true})};n.prototype.handleSlotChange=function(){return __awaiter(this,void 0,void 0,(function(){var n;var o=this;return __generator(this,(function(e){switch(e.label){case 0:r(this.host);this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox"));this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]');n=this;return[4,Promise.all(this.checkboxes.reduce((function(n,o){n.push(o.getInputElement());return n}),[]))];case 1:n.nativeCbs=e.sent();this.nativeCbs.forEach((function(n){return n.addEventListener("invalid",o.handleInvalid)}));return[2]}}))}))};n.prototype.componentWillLoad=function(){this.showInlineValidation=s(this.showInlineValidation,20);this.customValidate=this.customValidate.bind(this)};n.prototype.connectedCallback=function(){this.attachSlotObserver()};n.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};n.prototype.render=function(){var n=this.host.ownerDocument.dir==="rtl";var o=this.grpId+"-lbl";var e=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return t(i,Object.assign({},this.checkboxTypes,{dir:n?"rtl":null}),t("fieldset",{disabled:this.disabled,class:{nanogroupcb:true,"show-error":this.showErrorMsg}},t("legend",{class:"nanogroupcb__legend",id:o},this.legend),t("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+e},t("slot",null)),(this.showInlineError||this.hasHelperSlot)&&t("div",{class:"nanogroupcb__more",id:e},!!this.showInlineError?t("div",{class:"nanogroupcb__error"},this.errorMessage):"",t("div",{class:"nanogroupcb__help"},t("slot",{name:"helper"})))))};Object.defineProperty(n.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{validateOn:["handleCbChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}},enumerable:false,configurable:true});return n}());var u=0;h.style=l}}}));
-//# sourceMappingURL=p-e8a97250.system.entry.js.map