@nanoporetech-digital/components 1.13.10 → 1.13.14

package/dist/nano-components/p-a9963077.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.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"names":["DaysOfWeek","isEqual","a","b","getFullYear","getMonth","getDate","addDays","date","days","d","Date","setDate","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 a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()\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(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): 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(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): 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(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): 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()\n    .toString(16)\n    .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\">{day.toLocaleDateString(undefined, {day: 'numeric', month: 'long'})}</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>(array: T[], startingOffset: number, mapFn: (item: T) => U): 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 = [string, string, string, string, string, string, string, string, string, string, string, string]\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: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\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: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n}\n\nexport default localization\n","import { Component, ComponentInterface, Host, Prop, Element, h, Event, EventEmitter, State, Method, Watch } 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 { PickerChangeEvent, DuetLocalizedText, DateDisabledPredicate, Color } 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: HTMLElement;\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() 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(day, parseISODate(this.min), parseISODate(this.max));\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 = 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(day, parseISODate(this.min), parseISODate(this.max));\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 && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear;\n    const nextMonthDisabled =\n      maxDate != null && maxDate.getMonth() === focusedMonth && 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\n            onTouchMove={this.handleTouchMove}\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <div\n              class='duet-date__dialog-content'\n            >\n              <div class='duet-date__vhidden duet-date__instructions' aria-live='polite'>\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 class='duet-date__header' onFocusin={this.disableActiveFocus}>\n                <div>\n                  <h2 id={this.dialogLabelId} class=\"duet-date__vhidden\" aria-live=\"polite\">\n                    {this.localization.monthNames[focusedMonth]} {this.focusedDay.getFullYear()}\n                  </h2>\n                  <label htmlFor={this.monthSelectId} class='duet-date__vhidden'>\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 => (this.firstFocusableElement = this.monthSelectNode = element)}\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>{this.localization.monthNamesShort[focusedMonth]}</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 id={this.yearSelectId} class='duet-date__select--year' onChange={this.handleYearSelect}>\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'>{this.localization.prevMonthLabel}</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'>{this.localization.nextMonthLabel}</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: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --focus-shadow: #{$control-focus-style};\n  --inactive-color: #{$button-bg-color};\n\n  display: block;\n  font-size: 16px;\n}\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: .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: .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: .55em;\n  }\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 \"../../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: 0px 2px 8px rgba(0, 0, 0, .1);\n    opacity: 0;\n    transition: .2s ease opacity, .2s ease transform, .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(0px) translateZ(0);\n    }\n\n    ::slotted(nano-menu) {\n      max-height: 50vh;\n    }\n  }\n\n  &__accessible-title {\n    @include visually-hide();\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, Watch, h, Listen, ComponentInterface } 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 (!target || !target.tagName || target.tagName.toLowerCase() !== 'nano-menu') 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(() => this.panel.classList.remove('loading'))\n    this.panel.style.minHeight = (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 = (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(this.containingElement.tagName.toLowerCase()) !== 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 (target.closest(this.containingElement.tagName.toLowerCase()) !== this.containingElement) {\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') 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(this.host.querySelectorAll('[slot=\"trigger\"]'));\n    const accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n\n    if (accessibleTrigger) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');\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 id={this.labelId} class='dropdown__accessible-title' aria-live='polite'>\n                {this.dialogTitle}\n              </h2>\n            }\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nlet dropDownIds = 0;\n"]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-12a93bc3.system.js"],(function(e){"use strict";var t,n,a,i,s;return{setters:[function(e){t=e.r;n=e.h;a=e.e;i=e.g},function(e){s=e.i}],execute:function(){var l=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{display:block;-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.main-search{display:-webkit-box;display:-ms-flexbox;display:flex;background:white;font-size:14px;min-height:calc(100vh - 63px);-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main-search__wrap{display:contents;height:100%}.main-search ul{margin:0;padding:0;list-style:none}.main-search li{margin:0;padding:0}.main-search button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none}.main-search .icon-button{color:inherit;padding:0;-ms-flex-item-align:normal;-ms-grid-row-align:normal;align-self:normal;padding:9px 7px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.main-search__topbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}.main-search__topbar::after{content:"";width:calc(100% - 30px);left:30px;position:relative;border-bottom:1px solid #e5eef1;padding-top:0.9em}.main-search__applied-filters{border:solid 1px #e4e6e8;text-transform:uppercase;border-radius:3px;font-weight:bold;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:0.9;padding:5px 5px 0 5px;letter-spacing:2px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem}.main-search__applied-filters span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host(.small) .main-search__applied-filters{display:none}.main-search__applied-nofilter{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:3px;padding-left:7px;padding-right:7px;padding-top:10px;padding-bottom:10px;font-size:12px;color:rgba(69, 85, 86, 0.85)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-nofilter{padding-left:unset;padding-right:unset;-webkit-padding-start:7px;padding-inline-start:7px;-webkit-padding-end:7px;padding-inline-end:7px}}.main-search__applied-filter{padding-left:8px;padding-right:2px;padding-top:5px;padding-bottom:5px;margin-left:0;margin-right:5px;margin-top:0;margin-bottom:5px;color:#455556;font-size:11px;border-radius:2px;border:solid 1px rgba(0, 132, 169, 0.5);background-color:rgba(0, 132, 169, 0.2);line-height:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:2px;padding-inline-end:2px}}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.main-search__applied-filter .icon-button{padding-left:10px;padding-right:4px;padding-top:2px;padding-bottom:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__applied-filter .icon-button{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:4px;padding-inline-end:4px}}.main-search__applied-filter .icon-button nano-icon{pointer-events:none}.main-search .topbar__bkbtn{position:relative;left:-7px}:host(.small) .main-search .topbar__query{display:none}.main-search .topbar__filtering{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:1em;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__filtering{margin-left:unset;margin-right:unset;-webkit-margin-start:1em;margin-inline-start:1em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__order{min-width:165px;max-width:165px;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__order{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .main-search .topbar__order{max-width:300px}.main-search .topbar nano-select{opacity:1;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.main-search .topbar nano-select:not(.hydrated){opacity:0}.main-search .topbar__show-filters{margin-left:0.5em;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search .topbar__show-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;-webkit-margin-end:0;margin-inline-end:0}}.main-search .topbar__show-filters nano-icon{font-size:20px}:host(.small) .main-search .topbar__show-filters{display:-webkit-box;display:-ms-flexbox;display:flex}.main-search .topbar__filter-count{width:12px;height:12px;-webkit-box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);border:solid 1px #005c76;background-color:#005c76;color:white;font-size:7px;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:1;margin-bottom:3px}.main-search__results{font-size:14px;padding:1em 40px;color:rgba(69, 85, 86, 0.85);width:70%;height:100%}@media (max-width: 576px){.main-search__results{padding:1em 20px}}:host(.small) .main-search__results{width:100%}.main-search__filters{outline:none;padding-left:0;padding-right:40px;padding-top:1.8em;padding-bottom:1em;-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:40px;padding-inline-end:40px}}@media (max-width: 576px){.main-search__filters{padding-right:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.main-search__filters{padding-right:unset;-webkit-padding-end:20px;padding-inline-end:20px}}}:host(:not(.small)) .main-search__filters{max-width:350px;min-width:220px}.filters{color:#455556;background:white;font-size:14px}:host(.small) .filters{position:fixed;width:0;height:0;z-index:10;top:0;right:0;-webkit-transition:all 0s ease 0.5s;transition:all 0s ease 0.5s;background:none}:host(.small) .filters.show{height:100vh;width:100vw;-webkit-transition:all 0s ease 0s;transition:all 0s ease 0s}:host(.small) .filters.show::after{opacity:1}:host(.small) .filters::after{content:"";background:rgba(0, 0, 0, 0.5);position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;opacity:0;-webkit-transition:0.1s ease opacity;transition:0.1s ease opacity}.filters__close-filters{display:none !important;font-size:1.4em}:host(.small) .filters__close-filters{display:inline-block !important;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.small) .filters__close-filters{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-wrap{position:absolute;top:0;right:0;background:#f7f6f6;-webkit-transform:translateX(100%);transform:translateX(100%);width:300px;min-width:200px;max-width:80vw;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;padding:1em;color:black;top:0;height:100vh}:host(.small) .filters.show .filters-wrap{-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1);box-shadow:-3px -3px 7px rgba(0, 0, 0, 0.1)}.filters ul{margin:0;padding:0;list-style:none}.filters li{margin:0;padding:0}.filters nano-details{--padding:.8em;margin:0.8em 0}.filters nano-details strong[slot]{display:block;padding-left:calc(20px - .8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details strong[slot]{padding-left:unset;-webkit-padding-start:calc(20px - .8em);padding-inline-start:calc(20px - .8em);}}.filters nano-details nano-icon[slot=icon-end]{padding-left:calc(20px - .8em);padding-right:calc(20px - .8em)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters nano-details nano-icon[slot=icon-end]{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(20px - .8em);padding-inline-start:calc(20px - .8em);-webkit-padding-end:calc(20px - .8em);padding-inline-end:calc(20px - .8em)}}.filters li:last-child .filter-label{margin-bottom:0}.filters .filter-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0.5em 0;line-height:1.4;z-index:0}.filters .filter-label::before{margin-left:0;margin-right:1em;margin-top:0;margin-bottom:0;content:"";border:1px solid #0084a9;background:#fff;border-radius:3px;height:1em;width:1em;min-width:1em;min-height:1em;display:inline-block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters .filter-label::before{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:1em;margin-inline-end:1em}}.filters .filter-label::after{background-image:url("data:image/svg+xml;charset=utf-8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'%20viewBox=\'0%200%20512%20512\'><path%20fill=\'%23ffffff\'%20d=\'M173.898%20439.404l-166.4-166.4c-9.997-9.997-9.997-26.206%200-36.204l36.203-36.204c9.997-9.998%2026.207-9.998%2036.204%200L192%20312.69%20432.095%2072.596c9.997-9.997%2026.207-9.997%2036.204%200l36.203%2036.204c9.997%209.997%209.997%2026.206%200%2036.204l-294.4%20294.401c-9.998%209.997-26.207%209.997-36.204-.001z\'/></svg>");content:"";height:0.7em;width:0.7em;position:absolute;left:2px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:1;display:block;background-size:100%;background-position:center center;background-repeat:no-repeat}:host([dir=rtl]) .filters .filter-label::after{right:1px;left:auto}.filters .filter-cb{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}.filters .filter-cb:checked+.filter-label::before{background:#245a6f}.filters .filter-cb:focus+.filter-label::before{-webkit-box-shadow:0px 0 0px 1px rgba(0, 0, 0, 0.7);box-shadow:0px 0 0px 1px rgba(0, 0, 0, 0.7)}.filters-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filters-reset{color:#0084a9;font-size:12px;text-decoration:underline;margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.filters-reset{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}:host(.small) .filters-reset{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.filters-title{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;text-transform:uppercase;color:rgba(69, 85, 86, 0.85);font-weight:bold;font-size:14px}:host(.small) .filters-title{display:none}.result{text-decoration:none;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding-bottom:14px;border-bottom:1px solid #e4e6e8}.result *{word-wrap:break-word;word-break:break-word}.result__title{font-weight:normal;color:#0084a9;font-size:16px;line-height:1.43;margin:1em 0 0.5em 0;text-decoration:underline;width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:500}.result__title nano-icon{margin-left:0;margin-right:0.5em;margin-top:0;margin-bottom:0;min-width:20px;min-height:20px;opacity:0.8}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.result__title nano-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}@media (max-width: 768px){.result__title{width:100%}}.result__body{color:#455556;font-size:14px;line-height:1.67;width:70%}@media (max-width: 768px){.result__body{width:100%}}.result__date{font-size:10px;line-height:1.6;color:#455556;text-align:right;margin:auto 0;width:30%}@media (max-width: 768px){.result__date{width:100%;margin:0.8em 0 0 0}}';var r=e("nano_global_search_results",function(){function e(e){var n=this;t(this,e);this.attachResultListeners=function(){var e=n.algoliaResultsEle;e.querySelectorAll(".remove-filter").forEach((function(e){e.addEventListener("click",(function(e){var t=e.target;n.removeFilter(t.dataset.filter,t.dataset.filterVal)}))}));e.querySelectorAll(".back-btn").forEach((function(e){e.addEventListener("click",(function(){n.goback()}))}));e.querySelectorAll(".topbar__show-filters").forEach((function(e){n.openFilterBtn=e;e.addEventListener("click",(function(){n.filtersDiv.tabIndex=-1;n.filtersDiv.classList.add("show");n.filtersDiv.setAttribute("aria-expanded","true");document.body.style.overflow="hidden";setTimeout((function(){return n.filtersDiv.focus()}),20)}))}))};this.handleGlobalNavReset=function(){n.goback()};this.handleGlobalNavSearch=function(e){var t=e.detail,a=t.results,i=t.client;var s=a.find((function(e){return e.selected}));n.apiKey=i.apiKey;n.appId=i.appId;n.index={name:s.indexName,index:s.index,domain:s.domain,filters:s.filters};n.algoliaEle.query=s.query}}e.prototype.handleAlgoliaCredsChange=function(){if(!this.apiKey||!this.appId||!this.algoliaEle)return;this.algoliaEle.apiKey=this.apiKey;this.algoliaEle.appId=this.appId};e.prototype.handleAlgoliaIndexChange=function(){if(!this.index||!this.algoliaEle)return;this.algoliaEle.searchIndex=this.index};e.prototype.attachListeners=function(){var e=this;this.algoliaResultsEle=this.algoliaEle.querySelector("nano-algolia-results");this.algoliaResultsEle.removeEventListener("nanoTplUpdated",this.attachResultListeners);this.algoliaResultsEle.addEventListener("nanoChange",(function(t){if(t.target.classList.contains("indexchange")){e.changeOrder(t)}}));this.attachResultListeners();this.algoliaResultsEle.addEventListener("nanoTplUpdated",this.attachResultListeners);this.algoliaEle.querySelectorAll(".filters-reset").forEach((function(t){t.addEventListener("click",(function(){e.removeAllFilters()}))}));this.algoliaEle.querySelectorAll(".close-filters").forEach((function(t){t.addEventListener("click",(function(){e.closefilters()}))}));var t=this.algoliaEle.querySelector(".filters-wrap");if(t){t.addEventListener("click",(function(e){e.stopPropagation()}))}this.filtersDiv=this.algoliaEle.querySelector("#main-search-filters")};e.prototype.changeOrder=function(e){this.algoliaEle.replicaIndex=e.detail.value};e.prototype.goback=function(){this.removeAllFilters();this.algoliaEle.showResults=false;this.algoliaEle.query=""};e.prototype.removeFilter=function(e,t){this.algoliaEle.removeFilters(e,t)};e.prototype.removeAllFilters=function(){this.algoliaEle.removeFilters()};e.prototype.closefilters=function(){var e=this;if(!this.filtersDiv)return;this.filtersDiv.tabIndex=null;this.filtersDiv.classList.remove("show");this.filtersDiv.setAttribute("aria-expanded","false");document.body.style.overflow="";setTimeout((function(){return e.openFilterBtn.focus()}),20)};e.prototype.componentDidLoad=function(){var e=this;this.ro=new s((function(t){for(var n=0,a=t;n<a.length;n++){var i=a[n];if(!i.contentRect.width)return;e.currentWidth=i.contentRect.width}}));this.ro.observe(this.el);this.algoliaEle.filters=["created > "+Math.floor((Date.now()-631152e5)/1e3)]};e.prototype.connectedCallback=function(){this.globalNav=document.querySelector("nano-global-nav");this.globalNav.addEventListener("nanoSearchResult",this.handleGlobalNavSearch);this.globalNav.addEventListener("nanoSearchReset",this.handleGlobalNavReset)};e.prototype.disconnectedCallback=function(){if(this.ro)this.ro.disconnect();this.globalNav.removeEventListener("nanoSearchResult",this.handleGlobalNavSearch);this.globalNav.removeEventListener("nanoSearchReset",this.handleGlobalNavReset)};e.prototype.render=function(){var e=this;return n(a,{class:{small:this.currentWidth<577},dir:this.el.ownerDocument.dir==="rtl"?"rtl":false},n("nano-algolia",{"store-id":"searchq","store-method":"url-hash-push",class:"main-search__wrap sc-nano-global-search-results",ref:function(t){return e.algoliaEle=t},onNanoResultsShown:function(){return e.attachListeners()},"infinite-scroll":true},n("script",{type:"text/template",slot:"template"},'<div class="main-search sc-nano-global-search-results">\n              <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results">\n                <script type="text/template" slot="start-template">\n                  <div class="sc-nano-global-search-results main-search__topbar topbar">\n                    <button class="sc-nano-global-search-results topbar__bkbtn back-btn icon-button">\n                      <nano-icon class="sc-nano-global-search-results" name="light/chevron-left" size="small"></nano-icon>\n                    </button>\n                    <div>\n                      <em class="sc-nano-global-search-results topbar__query">\'{{ it.query }}\' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class="sc-nano-global-search-results topbar__filtering">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === \'All\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order">\n                          <option value="all_prod_en">Sort by: Most relevant</option>\n                          <option value="all_prod_en_date_desc">Sort by: Newest</option>\n                          <option value="all_prod_en_date_asc">Sort by: Oldest</option>\n                          <option value="all_prod_en_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'www\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order">\n                          <option value="cws_english_en">Sort by: Most relevant</option>\n                          <option value="cws_english_en_date_desc">Sort by: Newest</option>\n                          <option value="cws_english_en_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Resources\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order">\n                          <option value="cws_english_resources_en">Sort by: Most relevant</option>\n                          <option value="cws_english_resources_en_featured_desc">Sort by: Newest</option>\n                          <option value="cws_english_resources_en_featured_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Store\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--www indexchange" value="{{ it.index }}" hide-label="true" label="Sort order">\n                          <option value="store_prod">Sort by: Most relevant</option>\n                          <option value="store_prod_date_desc">Sort by: Newest</option>\n                          <option value="store_prod_date_asc">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === \'Community\') }}\n                        <nano-select class="sc-nano-global-search-results topbar__order topbar__order--community indexchange" value="{{ it.index }}" hide-label="true" label="Sort order">\n                          <option value="community_prod">Sort by: Most relevant</option>\n                          <option value="community_prod_date_desc">Sort by: Newest</option>\n                          <option value="community_prod_date_asc">Sort by: Oldest</option>\n                          <option value="community_prod_activity_date_desc">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class="sc-nano-global-search-results topbar__show-filters filters-title" aria-controls="main-search-filters">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class="sc-nano-global-search-results topbar__filter-count">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class="sc-nano-global-search-results" name="light/filter"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class="sc-nano-global-search-results main-search__applied-filters">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class="sc-nano-global-search-results main-search__applied-filter">\n                              {{ filterVal | public_name }}\n                              <button class="sc-nano-global-search-results icon-button remove-filter" data-filter="{{ filterObj.name }}" data-filter-val="{{ filterVal }}">\n                                <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class="sc-nano-global-search-results main-search__applied-nofilter">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                <\/script>\n\n                <script type="text/template" slot="result-template">\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class="sc-nano-global-search-results">\n                        <a class="sc-nano-global-search-results result" href="{{ result.url | abs_url(it, result) }}">\n                          <h4 class="sc-nano-global-search-results result__title" data-icon-set="{{(iconSet = false)}}">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === \'faq\' || result.type === \'faqs\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/question-circle"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'comment\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comment"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'protocol\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/clipboard-list"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'publication\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-chart-line"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'poster\' || result.type === \'lc_poster\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/presentation"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'post\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/comments"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'news_item\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/newspaper"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'event\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/calendar"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'talk\' || result.type === \'lc_lightning_talk\' || result.type === \'ncm_plenary_talk\' || result.type === \'ncm_lightning_talk\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/keynote"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'video\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/video"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'data_release\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/analytics"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'job_vacancy\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/ballot-check"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'tool\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/wrench"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'literature\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/book"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'community_info\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/users"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'article\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-alt"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'provider\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/handshake"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'apps\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/vials"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'white_paper\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/file-pdf"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === \'Nanopore Store\') }}\n                                <nano-icon data-icon-set="{{(iconSet = true)}}" class="sc-nano-global-search-results" name="light/shopping-cart"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class="sc-nano-global-search-results" name="light/file"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class="sc-nano-global-search-results result__body">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class="sc-nano-global-search-results result__date">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class="sc-nano-global-search-results result__date">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                <\/script>\n\n                <div slot="start-output"></div>\n                <ul slot="result-output" class="sc-nano-global-search-results"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class="sc-nano-global-search-results main-search__filters filters close-filters" id="main-search-filters">\n                  <div class="sc-nano-global-search-results filters-wrap">\n                    {{ @if(it.totalHits) }}\n                      <div class="sc-nano-global-search-results filters-header">\n                        <strong class="sc-nano-global-search-results filters-title">Filters</strong>\n                        <button class="sc-nano-global-search-results filters-reset">Reset</button>\n                        <button class="sc-nano-global-search-results filters__close-filters close-filters icon-button" aria-controls="main-search-filters">\n                          <nano-icon class="sc-nano-global-search-results" name="light/times"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters[\'type\']) }}\n                        <nano-details class="sc-nano-global-search-results" open={true} icon-rotation="180">\n                          <strong slot="label">Type</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf1" store-method="url-hash-push" filter-name="type">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="type-{{ filter }}-{{x}}" />\n                                <label class="sc-nano-global-search-results filter-label" for="type-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'channel\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Channels</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf2" store-method="url-hash-push" filter-name="channel">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="channel-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="channel-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'authors\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Authors</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf3" store-method="url-hash-push" filter-name="authors">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="authors-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="authors-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'categories_without_path\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Category</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf4" store-method="url-hash-push" filter-name="categories_without_path">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                  <input class="sc-nano-global-search-results filter-cb" type="checkbox" value="{{ filter }}" id="cwp-{{ filter }}-{{x}}" />\n                                  <label class="sc-nano-global-search-results filter-label" for="cwp-{{ filter }}-{{x}}">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters[\'tags\']) }}\n                        <nano-details open={true} icon-rotation="180">\n                          <strong slot="label">Tags</strong>\n                          <nano-icon slot="icon-end" name="light/chevron-down" size="small"></nano-icon>\n                          <nano-algolia-filter store-id="searchf5" store-method="url-hash-push" filter-name="tags">\n                            <script type="text/template" slot="filter-template">\n                              <ul class="sc-nano-global-search-results" data-num="{{(x = 0)}}">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class="sc-nano-global-search-results" data-num="{{(x++)}}">\n                                <input class="filter-cb sc-nano-global-search-results" type="checkbox" value="{{ filter }}" id="tags-{{ filter }}-{{x}}" />\n                                <label class="filter-label sc-nano-global-search-results" for="tags-{{ filter }}-{{x}}">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            <\/script>\n                            <div slot="output"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>'),n("div",{slot:"output"}),n("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{algoliaEle:["handleAlgoliaCredsChange","handleAlgoliaIndexChange"],apiKey:["handleAlgoliaCredsChange"],appId:["handleAlgoliaCredsChange"],index:["handleAlgoliaIndexChange"]}},enumerable:false,configurable:true});return e}());r.style=l}}}));
-//# sourceMappingURL=p-a9ae9f6c.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/global-search-results/global-search-results.scss?tag=nano-global-search-results&encapsulation=shadow","src/components/global-search-results/global-search-results.tsx"],"names":["globalSearchResultsCss","GlobalSearchResults","exports","class_1","hostRef","_this","this","attachResultListeners","resultEle","algoliaResultsEle","querySelectorAll","forEach","item","addEventListener","clickEv","filter","target","removeFilter","dataset","filterVal","goback","openFilterBtn","filtersDiv","tabIndex","classList","add","setAttribute","document","body","style","overflow","setTimeout","focus","handleGlobalNavReset","handleGlobalNavSearch","e","_a","detail","results","client","result","find","selected","apiKey","appId","index","name","indexName","domain","filters","algoliaEle","query","prototype","handleAlgoliaCredsChange","handleAlgoliaIndexChange","searchIndex","attachListeners","querySelector","removeEventListener","ev","contains","changeOrder","removeAllFilters","closefilters","filterWrap","stopPropagation","replicaIndex","value","showResults","facet","removeFilters","remove","componentDidLoad","ro","ResizeObserver","entries","_i","entries_1","length","entry","contentRect","width","currentWidth","observe","el","Math","floor","Date","now","connectedCallback","globalNav","disconnectedCallback","disconnect","render","h","Host","class","small","dir","ownerDocument","store-id","store-method","ref","ele","onNanoResultsShown","infinite-scroll","type","slot"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  display: block;\n  flex: 1 1 100%;\n}\n\n.main-search {\n  display: flex;\n  background: white;\n  font-size: 14px;\n  min-height: calc(100vh - 63px);\n  justify-content: space-between;\n\n  &__wrap {\n    /* autoprefixer: ignore next */\n    display: contents;\n    height: 100%;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  button {\n    appearance: none;\n    border: none;\n    background: none;\n  }\n\n  .icon-button {\n    color: inherit;\n    padding: 0;\n    align-self: normal;\n    padding: 9px 7px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n  }\n\n  &__topbar {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    margin-bottom: 1em;\n\n    &::after {\n      content: '';\n      width: calc(100% - 30px);\n      left: 30px;\n      position: relative;\n      border-bottom: 1px solid #e5eef1;\n      padding-top: .9em;\n    }\n  }\n\n  &__applied-filters {\n    border: solid 1px $color-lightgrey;\n    text-transform: uppercase;\n    border-radius: 3px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    line-height: .9;\n    padding: 5px 5px 0 5px;\n    letter-spacing: 2px;\n    flex-wrap: wrap;\n    margin-bottom: .5rem;\n\n    span {\n      display: flex;\n      align-items: center;\n    }\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n\n  &__applied-nofilter {\n    @include margin(0, 5px, 3px, 0);\n    @include padding(10px, 7px, 10px, 7px);\n    font-size: 12px;\n    color: rgba(69, 85, 86, 0.85);\n  }\n\n  &__applied-filter {\n    @include padding(5px, 2px, 5px, 8px);\n    @include margin(0, 5px, 5px, 0);\n    color: $color-darkgrey;\n    font-size: 11px;\n    border-radius: 2px;\n    border: solid 1px rgba(0, 132, 169, 0.5);\n    background-color: rgba(0, 132, 169, 0.2);\n    line-height: 1;\n\n    .icon-button {\n      @include padding(2px, 4px, 1px, 10px);\n\n      nano-icon {\n        pointer-events: none;\n      }\n    }\n  }\n\n  .topbar {\n    &__bkbtn {\n      position: relative;\n      left: -7px;\n    }\n\n    &__query {\n\n      :host(.small) & {\n        display: none;\n      }\n    }\n\n    &__filtering {\n      display: flex;\n      align-items: center;\n      @include margin(0, 0, 0, 1em);\n      flex: 1;\n    }\n\n    &__order {\n      min-width: 165px;\n      max-width: 165px;\n      @include margin(0, 0, 0, auto);\n\n      // @include media-breakpoint-down('sm') {\n      //   max-width: 300px;\n      // }\n\n      :host(.small) & {\n        max-width: 300px;\n      }\n    }\n\n    nano-select {\n      opacity: 1;\n      transition: .1s ease opacity;\n\n      &:not(.hydrated) {\n        opacity: 0;\n      }\n    }\n\n    &__show-filters {\n      @include margin(0, 0, 0, .5em);\n      text-transform: uppercase;\n      display: none;\n      flex-direction: column;\n      align-items: center;\n\n      nano-icon {\n        font-size: 20px;\n      }\n\n      // @include media-breakpoint-down('sm') {\n      //   display: flex;\n      // }\n\n      :host(.small) & {\n        display: flex;\n      }\n    }\n\n    &__filter-count {\n      width: 12px;\n      height: 12px;\n      box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);\n      border: solid 1px #005c76;\n      background-color: #005c76;\n      color: white;\n      font-size: 7px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n      margin-bottom: 3px;\n    }\n  }\n\n  &__results {\n    font-size: 14px;\n    padding: 1em 40px;\n    color: rgba(69, 85, 86, 0.85);\n    width: 70%;\n    height: 100%;\n\n    @include media-breakpoint-down('sm') {\n      padding: 1em 20px;\n    }\n\n    :host(.small) & {\n      width: 100%;\n    }\n  }\n\n  &__filters {\n    outline: none;\n    @include padding(1.8em, 40px, 1em, 0);\n\n    @include media-breakpoint-down('sm') {\n      @include padding(null, 20px, null, null);\n    }\n\n    flex: 1 1 30%;\n    box-sizing: border-box;\n\n    :host(:not(.small)) & {\n      max-width: 350px;\n      min-width: 220px;\n    }\n  }\n}\n\n.filters {\n  color: $color-darkgrey;\n  background: white;\n  font-size: 14px;\n\n  :host(.small) & {\n    position: fixed;\n    width: 0;\n    height: 0;\n    z-index: 10;\n    top: 0;\n    right: 0;\n    transition: all 0s ease .5s;\n    background: none;\n\n    &.show {\n      height: 100vh;\n      width: 100vw;\n      transition: all 0s ease 0s;\n\n      &::after {\n        opacity: 1;\n      }\n    }\n\n    &::after {\n      content: '';\n      background: rgba(0, 0, 0, .5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n      opacity: 0;\n      transition: .1s ease opacity;\n    }\n  }\n\n  &__close-filters {\n    display: none !important;\n    font-size: 1.4em;\n\n    :host(.small) & {\n      display: inline-block !important;\n      @include margin(0, 0, 0, auto);\n    }\n  }\n\n  &-wrap {\n    :host(.small) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: rgb(247, 246, 246);\n      transform: translateX(100%);\n      width: 300px;\n      min-width: 200px;\n      max-width: 80vw;\n      transition: transform .3s ease;\n      padding: 1em;\n      color: black;\n      // overflow: auto;\n      top: 0;\n      height: 100vh;\n    }\n  }\n\n  &.show {\n    .filters-wrap {\n      :host(.small) & {\n        transform: translateX(0%);\n        box-shadow: -3px -3px 7px rgba(0, 0, 0, .1);\n      }\n    }\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  nano-details {\n    --padding: .8em;\n    margin: .8em 0;\n\n    strong[slot] {\n      display: block;\n      @include padding(null, null, null, calc(20px - .8em));\n    }\n\n    nano-icon[slot=\"icon-end\"] {\n      @include padding(null, calc(20px - .8em), null, calc(20px - .8em));\n    }\n  }\n\n  li:last-child .filter-label {\n    margin-bottom: 0;\n  }\n\n  .filter-label {\n    display: flex;\n    align-items: center;\n    position: relative;\n    margin: .5em 0;\n    line-height: 1.4;\n    z-index: 0;\n\n    &::before {\n      @include margin(0, 1em, 0, 0);\n      content: '';\n      border: 1px solid $color-blue;\n      background: $color-white;\n      border-radius: 3px;\n      height: 1em;\n      width: 1em;\n      min-width: 1em;\n      min-height: 1em;\n      display: inline-block;\n    }\n\n    &::after {\n      @include svg-background-image(\"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='#ffffff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/></svg>\");\n      content: '';\n      height: 0.7em;\n      width: 0.7em;\n      position: absolute;\n      left: 2px;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 1;\n      display: block;\n      background-size: 100%;\n      background-position: center center;\n      background-repeat: no-repeat;\n\n      @include rtl-host() {\n        right: 1px;\n        left: auto;\n      }\n    }\n  }\n\n  .filter-cb {\n    @include visually-hide;\n\n    &:checked+.filter-label {\n      &::before {\n        background: $color-blue--darker;\n      }\n    }\n\n    &:focus+.filter-label {\n      &::before {\n        box-shadow: 0px 0 0px 1px rgba(0, 0, 0, .7);\n      }\n    }\n  }\n\n  &-header {\n    display: flex;\n    align-items: center;\n  }\n\n  &-reset {\n    color: $color-blue;\n    font-size: 12px;\n    text-decoration: underline;\n    @include margin(0, 0, 0, auto);\n\n    :host(.small) & {\n      @include margin(0, 0, 0, 0);\n    }\n  }\n\n  &-title {\n    @include margin(0, 0, 0, 0);\n    text-transform: uppercase;\n    color: rgba(69, 85, 86, 0.85);\n    font-weight: bold;\n    font-size: 14px;\n\n    :host(.small) & {\n      display: none;\n    }\n  }\n}\n\n.result {\n  text-decoration: none;\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-bottom: 14px;\n  border-bottom: 1px solid $color-lightgrey;\n\n  * {\n    word-wrap: break-word;\n    word-break: break-word;\n  }\n\n  &__title {\n    font-weight: normal;\n    color: $color-blue;\n    font-size: 16px;\n    line-height: 1.43;\n    margin: 1em 0 .5em 0;\n    text-decoration: underline;\n    width: 70%;\n    display: flex;\n    font-weight: 500;\n\n    nano-icon {\n      @include margin(0, .5em, 0, 0);\n      min-width: 20px;\n      min-height: 20px;\n      opacity: .8;\n    }\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__body {\n    color: $color-darkgrey;\n    font-size: 14px;\n    line-height: 1.67;\n    width: 70%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n    }\n  }\n\n  &__date {\n    font-size: 10px;\n    line-height: 1.6;\n    color: $color-darkgrey;\n    text-align: right;\n    margin: auto 0;\n    width: 30%;\n\n    @include media-breakpoint-down('md') {\n      width: 100%;\n      margin: .8em 0 0 0;\n    }\n  }\n}\n","import { Component, h, Host, Element, State, ComponentInterface, Watch } from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { AloliaSearchResultDetail } from '../../interface';\nimport { SearchIndex } from '../../interface';\n\n/**\n * Nanopore Global Search results component\n * to be used in conjunction with [Globla-Nav](/story/nano-compounds-global-nav).\n * A shortcut / helper which combines algolia components.\n * There should only be one <nano-global-search-results> per page\n * and should be a direct child of <nano-global-nav>\n */\n@Component({\n  tag: 'nano-global-search-results',\n  styleUrl: 'global-search-results.scss',\n  shadow: true\n})\nexport class GlobalSearchResults implements ComponentInterface {\n  private algoliaResultsEle: HTMLNanoAlgoliaResultsElement;\n  private filtersDiv: HTMLElement;\n  private openFilterBtn: HTMLButtonElement;\n  private ro: ResizeObserver;\n  private globalNav: HTMLNanoGlobalNavElement;\n\n  @State() algoliaEle: HTMLNanoAlgoliaElement;\n  @State() currentWidth: number;\n  @State() apiKey: string;\n  @State() appId: string;\n  @State() index: SearchIndex;\n\n  @Element() private el: HTMLNanoGlobalSearchResultsElement;\n\n  @Watch('algoliaEle')\n  @Watch('apiKey')\n  @Watch('appId')\n  handleAlgoliaCredsChange() {\n    if (!this.apiKey || !this.appId || !this.algoliaEle) return;\n    this.algoliaEle.apiKey = this.apiKey;\n    this.algoliaEle.appId = this.appId;\n  }\n\n  @Watch('algoliaEle')\n  @Watch('index')\n  handleAlgoliaIndexChange() {\n    if (!this.index || !this.algoliaEle) return;\n    this.algoliaEle.searchIndex = this.index;\n  }\n\n  private attachListeners() {\n    this.algoliaResultsEle = this.algoliaEle.querySelector('nano-algolia-results');\n\n    // clear previous listeners incase\n    this.algoliaResultsEle.removeEventListener('nanoTplUpdated', this.attachResultListeners)\n    this.algoliaResultsEle.addEventListener('nanoChange', (ev) => {\n      if ((ev.target as HTMLNanoSelectElement).classList.contains('indexchange')) {\n        this.changeOrder(ev)\n      }\n    })\n    // add results listeners\n    this.attachResultListeners();\n    this.algoliaResultsEle.addEventListener('nanoTplUpdated', this.attachResultListeners);\n\n    this.algoliaEle.querySelectorAll('.filters-reset').forEach(item => {\n      item.addEventListener('click', () => {\n        this.removeAllFilters();\n      })\n    })\n\n    this.algoliaEle.querySelectorAll('.close-filters').forEach(item => {\n      item.addEventListener('click', () => {\n        this.closefilters();\n      });\n    });\n\n    let filterWrap = this.algoliaEle.querySelector('.filters-wrap');\n    if (filterWrap) {\n      filterWrap.addEventListener('click', (e) => {\n        e.stopPropagation();\n      });\n    }\n\n    this.filtersDiv = this.algoliaEle.querySelector('#main-search-filters');\n  }\n\n  private attachResultListeners = () => {\n    let resultEle = this.algoliaResultsEle;\n\n    resultEle.querySelectorAll('.remove-filter').forEach(item => {\n      item.addEventListener('click', (clickEv: MouseEvent) => {\n\n        let filter = clickEv.target as HTMLElement;\n        this.removeFilter(filter.dataset.filter, filter.dataset.filterVal);\n      })\n    })\n\n    resultEle.querySelectorAll('.back-btn').forEach(item => {\n      item.addEventListener('click', () => {\n        this.goback();\n      })\n    })\n\n    resultEle.querySelectorAll('.topbar__show-filters').forEach(item => {\n      this.openFilterBtn = item as HTMLButtonElement;\n      item.addEventListener('click', () => {\n        this.filtersDiv.tabIndex = -1;\n        this.filtersDiv.classList.add('show');\n        this.filtersDiv.setAttribute('aria-expanded', 'true');\n        document.body.style.overflow = 'hidden';\n        setTimeout(() => this.filtersDiv.focus(), 20)\n      });\n    });\n  }\n\n  private changeOrder(ev) {\n    this.algoliaEle.replicaIndex = ev.detail.value;\n  }\n\n  private goback() {\n    this.removeAllFilters();\n    this.algoliaEle.showResults = false;\n    this.algoliaEle.query = '';\n  }\n\n  private removeFilter(facet, filter) {\n    this.algoliaEle.removeFilters(facet, filter)\n  }\n\n  private removeAllFilters() {\n    this.algoliaEle.removeFilters()\n  }\n\n  private closefilters() {\n    if (!this.filtersDiv) return;\n    this.filtersDiv.tabIndex = null;\n    this.filtersDiv.classList.remove('show');\n    this.filtersDiv.setAttribute('aria-expanded', 'false');\n    document.body.style.overflow = '';\n    setTimeout(() => this.openFilterBtn.focus(), 20)\n  }\n\n  private handleGlobalNavReset = () => {\n    this.goback();\n  }\n\n  private handleGlobalNavSearch = (e: CustomEvent) => {\n    const { detail: { results, client } } = e as {detail: AloliaSearchResultDetail};\n    const result = results.find(result => result.selected);\n\n    this.apiKey = client.apiKey;\n    this.appId = client.appId;\n    this.index = {\n      name: result.indexName,\n      index: result.index,\n      domain: result.domain,\n      filters: result.filters\n    };\n    this.algoliaEle.query = result.query;\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      }\n    });\n    this.ro.observe(this.el);\n    this.algoliaEle.filters = ['created > ' + Math.floor((Date.now() - 63115200000) / 1000)]; // only get last 2 years\n  }\n\n  connectedCallback() {\n    this.globalNav = document.querySelector('nano-global-nav');\n    this.globalNav.addEventListener('nanoSearchResult', this.handleGlobalNavSearch);\n    this.globalNav.addEventListener('nanoSearchReset', this.handleGlobalNavReset);\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n    this.globalNav.removeEventListener('nanoSearchResult', this.handleGlobalNavSearch);\n    this.globalNav.removeEventListener('nanoSearchReset', this.handleGlobalNavReset);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'small': this.currentWidth < 577 }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : false}\n      >\n        <nano-algolia store-id=\"searchq\" store-method=\"url-hash-push\" class=\"main-search__wrap sc-nano-global-search-results\" ref={ele => this.algoliaEle = ele} onNanoResultsShown={() => this.attachListeners()} infinite-scroll>\n          <script type=\"text/template\" slot=\"template\">\n            {`<div class=\"main-search sc-nano-global-search-results\">\n              <nano-algolia-results id=\"main-search-results\" class=\"main-search__results sc-nano-global-search-results\">\n                <script type=\"text/template\" slot=\"start-template\">\n                  <div class=\"sc-nano-global-search-results main-search__topbar topbar\">\n                    <button class=\"sc-nano-global-search-results topbar__bkbtn back-btn icon-button\">\n                      <nano-icon class=\"sc-nano-global-search-results\" name=\"light/chevron-left\" size=\"small\"></nano-icon>\n                    </button>\n                    <div>\n                      <em class=\"sc-nano-global-search-results topbar__query\">'{{ it.query }}' - </em> <strong>{{ it.totalHitsWithFilters }}</strong> Results\n                    </div>\n\n                    <div class=\"sc-nano-global-search-results topbar__filtering\">\n                      {{ @if (it.results.length) }}\n\n                      {{ @if (it.indexName === 'All') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\">\n                          <option value=\"all_prod_en\">Sort by: Most relevant</option>\n                          <option value=\"all_prod_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"all_prod_en_date_asc\">Sort by: Oldest</option>\n                          <option value=\"all_prod_en_activity_date_desc\">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'www') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\">\n                          <option value=\"cws_english_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_en_date_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_en_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Resources') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\">\n                          <option value=\"cws_english_resources_en\">Sort by: Most relevant</option>\n                          <option value=\"cws_english_resources_en_featured_desc\">Sort by: Newest</option>\n                          <option value=\"cws_english_resources_en_featured_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Store') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--www indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\">\n                          <option value=\"store_prod\">Sort by: Most relevant</option>\n                          <option value=\"store_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"store_prod_date_asc\">Sort by: Oldest</option>\n                        </nano-select>\n                        {{ /if }}\n\n                        {{ @if (it.indexName === 'Community') }}\n                        <nano-select class=\"sc-nano-global-search-results topbar__order topbar__order--community indexchange\" value=\"{{ it.index }}\" hide-label=\"true\" label=\"Sort order\">\n                          <option value=\"community_prod\">Sort by: Most relevant</option>\n                          <option value=\"community_prod_date_desc\">Sort by: Newest</option>\n                          <option value=\"community_prod_date_asc\">Sort by: Oldest</option>\n                          <option value=\"community_prod_activity_date_desc\">Sort by: Recent activity</option>\n                        </nano-select>\n                        {{ /if }}\n                      {{ /if }}\n\n                      <button class=\"sc-nano-global-search-results topbar__show-filters filters-title\" aria-controls=\"main-search-filters\">\n                        {{ @if (it.appliedFilters && it.appliedFilters.length > 0) }}\n                          <span class=\"sc-nano-global-search-results topbar__filter-count\">\n                            {{ (it.appliedFilters.reduce(function(a, b) { return a + (b.values ? b.values.length : 0) }, 0)) }}\n                          </span>\n                        {{ /if }}\n                        <nano-icon class=\"sc-nano-global-search-results\" name=\"light/filter\"></nano-icon>\n                      </button>\n                    </div>\n                  </div>\n\n                  {{ @if (it.results.length) }}\n                    <div class=\"sc-nano-global-search-results main-search__applied-filters\">\n                      {{ @if (it.appliedFilters) }}\n                        {{ @each(it.appliedFilters) => filterObj }}\n                          {{ @each(filterObj.values) => filterVal }}\n                            <span class=\"sc-nano-global-search-results main-search__applied-filter\">\n                              {{ filterVal | public_name }}\n                              <button class=\"sc-nano-global-search-results icon-button remove-filter\" data-filter=\"{{ filterObj.name }}\" data-filter-val=\"{{ filterVal }}\">\n                                <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                              </button>\n                            </span>\n                          {{ /each }}\n                        {{ /each }}\n                      {{ #else }}\n                        <span class=\"sc-nano-global-search-results main-search__applied-nofilter\">&nbsp;</span>\n                      {{ /if }}\n                    </div>\n                  {{ /if }}\n                </script>\n\n                <script type=\"text/template\" slot=\"result-template\">\n                  {{ @if (it.totalHitsWithFilters > 0) }}\n                    {{ @each(it.results) => result }}\n                      <li class=\"sc-nano-global-search-results\">\n                        <a class=\"sc-nano-global-search-results result\" href=\"{{ result.url | abs_url(it, result) }}\">\n                          <h4 class=\"sc-nano-global-search-results result__title\" data-icon-set=\"{{(iconSet = false)}}\">\n                            {{ @if (!it.legacy)  }}\n\n                              {{ @if (result.type === 'faq' || result.type === 'faqs') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/question-circle\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'comment') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comment\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'protocol') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/clipboard-list\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'publication') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-chart-line\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'poster' || result.type === 'lc_poster') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/presentation\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'post') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/comments\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'news_item') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/newspaper\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'event') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/calendar\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'talk' || result.type === 'lc_lightning_talk' || result.type === 'ncm_plenary_talk' || result.type === 'ncm_lightning_talk') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/keynote\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'video') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/video\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'data_release') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/analytics\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'job_vacancy') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/ballot-check\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'tool') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/wrench\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'literature') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/book\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'community_info') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/users\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'article') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-alt\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'provider') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/handshake\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'apps') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/vials\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'white_paper') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/file-pdf\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (result.type === 'Nanopore Store') }}\n                                <nano-icon data-icon-set=\"{{(iconSet = true)}}\" class=\"sc-nano-global-search-results\" name=\"light/shopping-cart\"></nano-icon>\n                              {{ /if }}\n\n                              {{ @if (!result.type || !iconSet) }}\n                                <nano-icon  class=\"sc-nano-global-search-results\" name=\"light/file\"></nano-icon>\n                              {{ /if }}\n                            {{ /if }}\n                            {{ result.title | safe }}\n                          </h4>\n                          {{ @if (result.body) }}\n                            <div class=\"sc-nano-global-search-results result__body\">{{ result.body | safe | trim_to(200) }}</div>\n                          {{ /if }}\n                          {{ @if (result.updated) }}\n                            <div class=\"sc-nano-global-search-results result__date\">Last Updated: {{ result.updated | date_short }}</div>\n                          {{ #else }}\n                            {{ @if (result.created) }}\n                              <div class=\"sc-nano-global-search-results result__date\">Added: {{ result.created | date_short }}</div>\n                            {{ /if }}\n                          {{ /if }}\n                        </a>\n                      </li>\n                    {{ /each }}\n                  {{ /if }}\n                </script>\n\n                <div slot=\"start-output\"></div>\n                <ul slot=\"result-output\" class=\"sc-nano-global-search-results\"></ul>\n              </nano-algolia-results>\n\n              {{ @if(Object.keys(it.origFilters).length) }}\n                <div class=\"sc-nano-global-search-results main-search__filters filters close-filters\" id=\"main-search-filters\">\n                  <div class=\"sc-nano-global-search-results filters-wrap\">\n                    {{ @if(it.totalHits) }}\n                      <div class=\"sc-nano-global-search-results filters-header\">\n                        <strong class=\"sc-nano-global-search-results filters-title\">Filters</strong>\n                        <button class=\"sc-nano-global-search-results filters-reset\">Reset</button>\n                        <button class=\"sc-nano-global-search-results filters__close-filters close-filters icon-button\" aria-controls=\"main-search-filters\">\n                          <nano-icon class=\"sc-nano-global-search-results\" name=\"light/times\"></nano-icon>\n                        </button>\n                      </div>\n                    {{ /if }}\n\n                    <div>\n                      {{ @if(it.origFilters['type']) }}\n                        <nano-details class=\"sc-nano-global-search-results\" open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Type</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf1\" store-method=\"url-hash-push\" filter-name=\"type\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"type-{{ filter }}-{{x}}\" />\n                                <label class=\"sc-nano-global-search-results filter-label\" for=\"type-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['channel']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Channels</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf2\" store-method=\"url-hash-push\" filter-name=\"channel\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"channel-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"channel-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['authors']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Authors</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf3\" store-method=\"url-hash-push\" filter-name=\"authors\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"authors-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"authors-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['categories_without_path']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Category</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf4\" store-method=\"url-hash-push\" filter-name=\"categories_without_path\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                {{ @if(!filter.match(/publication/)) }}\n                                  <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                  <input class=\"sc-nano-global-search-results filter-cb\" type=\"checkbox\" value=\"{{ filter }}\" id=\"cwp-{{ filter }}-{{x}}\" />\n                                  <label class=\"sc-nano-global-search-results filter-label\" for=\"cwp-{{ filter }}-{{x}}\">\n                                    <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                  </label></li>\n                                {{ /if }}\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n\n                      {{ @if(it.origFilters['tags']) }}\n                        <nano-details open={true} icon-rotation=\"180\">\n                          <strong slot=\"label\">Tags</strong>\n                          <nano-icon slot=\"icon-end\" name=\"light/chevron-down\" size=\"small\"></nano-icon>\n                          <nano-algolia-filter store-id=\"searchf5\" store-method=\"url-hash-push\" filter-name=\"tags\">\n                            <script type=\"text/template\" slot=\"filter-template\">\n                              <ul class=\"sc-nano-global-search-results\" data-num=\"{{(x = 0)}}\">\n                              {{ @foreach(it.dyn) => filter, filterVal }}\n                                <li class=\"sc-nano-global-search-results\" data-num=\"{{(x++)}}\">\n                                <input class=\"filter-cb sc-nano-global-search-results\" type=\"checkbox\" value=\"{{ filter }}\" id=\"tags-{{ filter }}-{{x}}\" />\n                                <label class=\"filter-label sc-nano-global-search-results\" for=\"tags-{{ filter }}-{{x}}\">\n                                  <span>{{ filter | public_name }} (<strong>{{ filterVal }}</strong>)</span>\n                                </label></li>\n                              {{ /foreach }}\n                              </ul>\n                            </script>\n                            <div slot=\"output\"></div>\n                          </nano-algolia-filter>\n                        </nano-details>\n                      {{ /if }}\n                    </div>\n                  </div>\n                </div>\n              {{ /if }}\n            </div>`}\n          </script>\n          <div slot=\"output\"></div>\n          <slot />\n        </nano-algolia>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/nano-components/p-aae1e5de.system.js

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(r,t){for(var n=0,e=t.length,i=r.length;n<e;n++,i++)r[i]=t[n];return r};System.register([],(function(r){"use strict";return{execute:function(){r("t",e);var t=r("a",(function(r,t){var e=r._original||r;return{_original:r,emit:n(e.emit.bind(e),t)}}));var n=r("d",(function(r,t){if(t===void 0){t=0}var n;return function(){var e=[];for(var i=0;i<arguments.length;i++){e[i]=arguments[i]}clearTimeout(n);n=setTimeout.apply(void 0,__spreadArray([r,t],e))}}));function e(r,t){var n=false;var e;var i;function a(){if(n){e=arguments;i=this;return}n=true;r.apply(this,arguments);setTimeout((function(){n=false;if(e){a.apply(i,e);e=i=null}}),t)}return a}}}}));
-//# sourceMappingURL=p-aae1e5de.system.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/throttle.ts"],"names":["debounceEvent","exports","event","wait","original","_original","emit","debounce","bind","callback","timer","args","_i","arguments","length","clearTimeout","setTimeout","apply","__spreadArray","throttle","delay","isThrottled","context","wrapper","this"],"mappings":"gNAMaA,EAAaC,EAAA,KAAG,SAACC,EAAqBC,GACjD,IAAMC,EAAYF,EAAcG,WAAaH,EAC7C,MAAO,CACLG,UAAWH,EACXI,KAAMC,EAASH,EAASE,KAAKE,KAAKJ,GAAWD,WAUpCI,EAAQN,EAAA,KAAG,SAACQ,EAAoCN,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,EAC3D,IAAIO,EACJ,OAAO,WAAC,IAAAC,EAAA,OAAA,IAAAC,EAAA,EAAAA,EAAAC,UAAAC,OAAAF,IAAc,CAAdD,EAAAC,GAAAC,UAAAD,GACNG,aAAaL,GACbA,EAAQM,WAAUC,WAAA,EAAAC,cAAA,CAACT,EAAUN,GAASQ,iBAU1BQ,EAASV,EAAoCW,GAC3D,IAAIC,EAAc,MAClB,IAAIV,EACJ,IAAIW,EAEJ,SAASC,IACP,GAAIF,EAAa,CACfV,EAAOE,UACPS,EAAUE,KACV,OAGFH,EAAc,KACdZ,EAASQ,MAAMO,KAAMX,WAErBG,YAAW,WACTK,EAAc,MACd,GAAIV,EAAM,CACRY,EAAQN,MAAMK,EAASX,GACvBA,EAAOW,EAAU,QAElBF,GAGL,OAAOG","sourcesContent":["import { EventEmitter } from '@stencil/core';\n\nexport const deferEvent = (event: EventEmitter): EventEmitter => {\n  return debounceEvent(event, 0);\n};\n\nexport const debounceEvent = (event: EventEmitter, wait: number): EventEmitter => {\n  const original = (event as any)._original || event;\n  return {\n    _original: event,\n    emit: debounce(original.emit.bind(original), wait)\n  } as EventEmitter;\n};\n\n/**\n * debounce ensures that one function call is made for an event that fires multiple times.\n * @param callback to perform after waiting\n * @param wait how to long to wait before calling the function\n * @returns a debounced function to call as often as required\n */\nexport const debounce = (callback: (...args: any[]) => void, wait = 0) => {\n  let timer: any;\n  return (...args: any[]): any => {\n    clearTimeout(timer);\n    timer = setTimeout(callback, wait, ...args);\n  };\n};\n\n/**\n * throttle delays executing a function - reducing the function calls of an event that fires multiple times.\n * @param callback to perform after a delay\n * @param delay how long to delay before calling the function\n * @returns a throttled function to call as often as required\n */\nexport function throttle(callback: (...args: [any]) => void, delay: number) {\n  let isThrottled = false;\n  let args: any;\n  let context: any;\n\n  function wrapper() {\n    if (isThrottled) {\n      args = arguments;\n      context = this;\n      return;\n    }\n\n    isThrottled = true;\n    callback.apply(this, arguments);\n\n    setTimeout(() => {\n      isThrottled = false;\n      if (args) {\n        wrapper.apply(context, args);\n        args = context = null;\n      }\n    }, delay);\n  }\n\n  return wrapper;\n}\n"]}

package/dist/nano-components/p-ac67f34a.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as n,e as c,g as a}from"./p-7a6bc3c5.js";import{c as t}from"./p-88d68319.js";import{f as r}from"./p-55aac2eb.js";let i=0;const s=class{constructor(n){e(this,n),this.nanoChange=o(this,"nanoChange",7),this.nanoFocus=o(this,"nanoFocus",7),this.nanoBlur=o(this,"nanoBlur",7),this.inputId="nano-cb-"+i++,this.inputType="checkbox",this.hasFocus=!1,this.checked=!1,this.disabled=!1,this.value="on",this.required=!1,this.type="checkbox",this.indeterminate=!1,this.invalid=!1,this.handleChange=e=>{this.checked=e.target.checked,this.indeterminate=!1},this.handleFocus=()=>{this.hasFocus=!0,this.nanoFocus.emit()},this.handleBlur=()=>{this.hasFocus=!1,this.nanoBlur.emit()}}async handleCheckedChange(){if(this.input.checked=this.checked,"radio"===this.inputType&&this.name&&this.checked){let e,o=this.host.closest("form");e=o?Array.from(o.querySelectorAll(`nano-checkbox[name="${this.name}"]`)):Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form"))),e.map((e=>{e!==this.host&&(e.checked=!1)}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){this.inputType="checkbox"===this.type||"tag"===this.type?"checkbox":"radio"}handleIndeterminateChange(){this.checked=!1,this.input.indeterminate=this.indeterminate}async getInputElement(){if(this.input)return this.input}async reportError(){return this.input.reportValidity()}async setError(e){this.input&&this.input.setCustomValidity(e)}async setFocus(){this.input&&(this.input.focus(),r.force(this.input))}async removeFocus(){this.input&&(this.input.blur(),r.force(this.input,!1))}handleInvalid(e){this.invalid=!e.target.validity.valid}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate,this.isRadioChecked(),r.observe(this.input)}disconnectedCallback(){r.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o="rtl"===this.host.ownerDocument.dir;return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("label",{class:{nanocb:!0,"nanocb--checked":this.checked,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("slot",null))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};s.style='.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:export{screen:1000}.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), .5);--tagbox-bg-color:rgba(var(--tagbox-rgb), .2);--tagbox-border-radius:0;--segment-color:#0084a9;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(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:.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), .8);--tagbox-bg-color:rgba(var(--tagbox-rgb), .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:0px;height:0px;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:0px;width:0px;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:0px;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}';export{s as nano_checkbox}
-//# sourceMappingURL=p-ac67f34a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/checkbox/checkbox.tsx","src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped"],"names":["checkboxIds","Checkbox","[object Object]","hostRef","this","inputId","inputType","hasFocus","checked","disabled","value","required","type","indeterminate","invalid","handleChange","ev","target","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","input","name","radios","form","host","closest","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","reportValidity","message","setCustomValidity","focus","focusVisible","force","blur","validity","valid","setTimeout","typeChange","isRadioChecked","observe","unobserve","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","handleInvalid","label","length"],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, ComponentInterface, State, Watch, Method, Element, Host } 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(form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`));\n      } else {\n        radios = Array.from(document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)).filter(radio => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => { if (el !== this.host) el.checked = false; })\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({ mutable: true, reflect: true }) 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: 'radio' | 'checkbox' | 'tag' | 'segment' | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag') 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) &&\n              <span>{this.label}</span>\n            }\n            <slot />\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n","@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\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), .5);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), .2);\n  --tagbox-border-radius: 0;\n\n  --segment-color: #{$color-blue};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n\n  --cb-border-radius: 2px;\n\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  --control-padding: .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, .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), .8);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), .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  --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    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      position: absolute;\n      content: \"\";\n      left: 0.625em;\n      top: 0.625em;\n      width: 0px;\n      height: 0px;\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      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        position: absolute;\n        content: \"\";\n        left: 0.75em;\n        top: 0.75em;\n        height: 0px;\n        width: 0px;\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, &--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, &--segment + .nanocb__label, &--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      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, &--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,.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      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: 0px;\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    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, &--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: var(--segment-border-radius) 0 0 var(--segment-border-radius);\n        border-right: none;\n      }\n      @include rtl-host(':first-of-type') {\n        border-radius: 0 var(--segment-border-radius) 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      @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: 0 var(--segment-border-radius) var(--segment-border-radius) 0;\n      }\n      @include rtl-host(':last-of-type') {\n        border-radius: var(--segment-border-radius) 0 0 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: .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        @include margin(0, 0, 0, .3125em);\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"]}

package/dist/nano-components/p-ad3db54a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,g as n}from"./p-7a6bc3c5.js";import{f as a}from"./p-55aac2eb.js";import{c as o}from"./p-190e2d91.js";const r=!!document.head.attachShadow,e=class{constructor(i){t(this,i),this.nanoChange=s(this,"nanoChange",7),this.nanoBlur=s(this,"nanoBlur",7),this.nanoFocus=s(this,"nanoFocus",7),this.hoverValue=0,this.isHovering=!1,this.value=0,this.max=5,this.precision=1,this.readonly=!1,this.disabled=!1,this.name="",this.symbolName="solid/star",this.symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>',this.handleClick=t=>{if(this.disabled||this.readonly)return;const s=this.getValueFromMousePosition(t);this.value=s===this.value?0:s,this.isHovering=!1},this.handleKeyDown=t=>{this.disabled||this.readonly||("ArrowLeft"===t.key&&(this.value=this.roundToPrecision(Math.max(0,this.value-(t.shiftKey?1:this.precision))),t.preventDefault()),"ArrowRight"===t.key&&(this.value=this.roundToPrecision(Math.min(this.max,this.value+(t.shiftKey?1:this.precision))),t.preventDefault()),"Home"===t.key&&(this.value=0,t.preventDefault()),"End"===t.key&&(this.value=this.max,t.preventDefault()))},this.handleMouseEnter=()=>{this.isHovering=!0},this.handleMouseLeave=()=>{this.isHovering=!1},this.handleFocus=()=>{this.nanoFocus.emit()},this.handleBlur=()=>{this.nanoBlur.emit()},this.handleMouseMove=t=>{this.hoverValue=this.getValueFromMousePosition(t)}}handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){this.symbol=()=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(t){const s=this.rating.getBoundingClientRect().left,i=this.rating.getBoundingClientRect().width;let n;return n=this.roundToPrecision((t.clientX-s)/i*this.max,this.precision),this.isRtl&&(n=this.max+this.precision-n),o(n,0,this.max)}roundToPrecision(t,s=.5){const i=1/s;return Math.ceil(t*i)/i}clip(t){if(!this.rating)return;const s=this.rating.getBoundingClientRect().width;return this.isRtl?`rect(0, ${s}px, 2em, ${s-s/100*(t/this.max*100)}px)`:`rect(0, ${s/100*(t/this.max*100)}px, 2em, 0)`}_getRoot(){return this.host.shadowRoot?this.host.shadowRoot:this.host}_fixClassNames(){let t=this.rating.className.split(" ").filter((t=>t.match(/^sc-nano/))),s=this._getRoot().querySelectorAll("*");s&&Array.from(s).map((s=>{t.map((t=>s.classList.add(t)))}))}componentDidLoad(){a.observe(this.rating),setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir}disconnectedCallback(){a.unobserve(this.rating)}componentDidRender(){this.host.shadowRoot&&r||this._fixClassNames()}render(){this.isRtl="rtl"===this.host.dir||"rtl"===this.host.ownerDocument.dir;let t=Array.from(Array(this.max).keys()),s=0;return s=this.disabled||this.readonly?this.value:this.isHovering?this.hoverValue:this.value,i("div",{class:"rating-wrap"},i("div",{dir:this.isRtl?"rtl":null,ref:t=>this.rating=t,part:"base",class:{rating:!0,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},i("span",{class:"rating__symbols rating__symbols--inactive"},t.map((t=>i("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===t+1},role:"presentation",onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(t+1)})))),i("span",{ref:t=>this.indicator=t,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(s)}},t.map((t=>i("span",{class:{rating__symbol:!0,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===t+1},role:"presentation",innerHTML:this.symbol(t+1)})))),i("input",{type:"hidden",name:this.name,value:this.value,readonly:this.readonly,disabled:this.disabled})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};e.style=".sc-nano-rating-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-rating:export{screen:1000}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin:0 calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;width:100%;-webkit-transition:-webkit-box-shadow 0.15s ease;transition:-webkit-box-shadow 0.15s ease;transition:box-shadow 0.15s ease;transition:box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;top:0;left:0;color:var(--symbol-color-active);pointer-events:none;width:100%}.rating__symbol.sc-nano-rating{-webkit-transition:0.2s -webkit-transform;transition:0.2s -webkit-transform;transition:0.2s transform;transition:0.2s transform, 0.2s -webkit-transform;text-align:center}.rating__symbol--hover.sc-nano-rating{-webkit-transform:scale(1.2);transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{-webkit-transform:none !important;transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";export{e as nano_rating}
-//# sourceMappingURL=p-ad3db54a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["CANSHADOW","document","head","attachShadow","Rating","[object Object]","hostRef","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","roundToPrecision","Math","shiftKey","preventDefault","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","nanoChange","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","host","shadowRoot","ctxClasses","className","split","filter","classStr","match","eles","_getRoot","querySelectorAll","Array","from","map","ele","classList","add","focusVisible","observe","setTimeout","indicator","style","clip","dir","ownerDocument","unobserve","_fixClassNames","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: .25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow .15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: .2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled, &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true\n})\nexport class Rating implements ComponentInterface {\n  rating: HTMLElement;\n  isRtl: boolean;\n  indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = ''\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) => '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) => '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(((event.clientX - containerLeft) / containerWidth) * this.max, this.precision);\n    if (this.isRtl) num = (this.max + this.precision) - num;\n\n    return clamp(\n      num,\n      0,\n      this.max\n    );\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.min(this.max, this.value + increment));\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  }\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  }\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  }\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  }\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  }\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  }\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl) return `rect(0, ${tw}px, 2em, ${tw - ((tw / 100) * ((displayValue / this.max) * 100))}px)`;\n    return `rect(0, ${(tw / 100) * ((displayValue / this.max) * 100)}px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className.split(' ').filter(classStr => classStr.match(/^sc-nano/))\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map(classStr => ele.classList.add(classStr))\n    })\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => this.indicator.style.clip = this.clip(this.value), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl = this.host.dir === 'rtl' || (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={el => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map(index => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span ref={span => this.indicator = span} class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue)\n            }}>\n            {counter.map(index => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input type=\"hidden\" name={this.name} value={this.value} readonly={this.readonly} disabled={this.disabled} />\n        </div>\n      </div>\n    );\n  }\n}\n"]}