@nanoporetech-digital/components 1.13.17 → 1.13.21

package/dist/esm-es5/nano-date-input.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["dateInputCss","DateRegxps","d","m","y","inputIds","DateInput","class_1","hostRef","_this","this","directInput","dateOrderIndeces","inputId","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","nanoValidate","emit","isValid","detail","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","_","trigger","focus","onDropdownShow","pickerEle","setFocus","onTriggerClick","onCloseClick","onCloseKeyDown","key","shiftKey","preventDefault","prototype","handleValueChange","inputValue","formatIsoDate","nanoChange","date","parseISODate","handleDateOrderChange","setDatePattern","testDateValidity","valueDate","min","max","error","toLocaleDateString","undefined","__awaiter","input","getInputElement","_a","sent","length","setCustomValidity","showError","handlePickerOpenChange","dropdown","open","reportValidity","validateFirst","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","splice","createDate","Date","dateStr","printISODate","connectedCallback","componentDidLoad","pickerCloseBtn","firstFocusEle","render","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","Object","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onClick","vhidden","onNanoHide","onNanoShow","dialog-title","distance","onKeyDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{$color-celsius};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    width: 100%;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils/utils';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\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   */\n  @Prop() min?: string;\n\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   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(undefined, this.helperTextFormat);\n      } else if (\n        this.max &&\n        (max = parseISODate(this.max)) &&\n        valueDate > max\n      ) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(undefined, this.helperTextFormat);\n      }\n    }\n\n    setTimeout(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    }, 100);\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (e: CustomEvent) => {\n    e.stopPropagation();\n    this.setValue((e.target as HTMLInputElement).value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 20);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => this.pickerEle.setFocus(), 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) this.pickerOpen = true;\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted.splice(this.dateOrderIndeces.d, 0, matches[3]);\n    formatted.splice(this.dateOrderIndeces.m, 0, matches[2]);\n    formatted.splice(this.dateOrderIndeces.y, 0, matches[1]);\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n  }\n\n  render() {\n    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n          >\n            <slot name=\"label\" />\n            {this.picker && (\n              <button\n                class=\"date-field__open\"\n                slot=\"inline-button\"\n                type=\"button\"\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>\n            )}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      undefined,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <nano-dropdown\n            placement={placement}\n            onNanoHide={this.onDropdownHide}\n            onNanoShow={this.onDropdownShow}\n            dialog-title=\"Choose a date\"\n            distance={-20}\n            class=\"date-field__dropdown\"\n            ref={(dropdown) => (this.dropdown = dropdown)}\n          >\n            <div>\n              <div class=\"date-field__close-bar\">\n                <button\n                  class=\"date-field__close\"\n                  type=\"button\"\n                  onClick={this.onCloseClick}\n                  onKeyDown={this.onCloseKeyDown}\n                  ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                >\n                  <nano-icon name=\"light/times\"></nano-icon>\n                  <span class=\"vhidden\">Close window</span>\n                </button>\n              </div>\n              <nano-date-picker\n                onNanoDatePicked={this.onDatePicked}\n                min={this.min || undefined}\n                max={this.max || undefined}\n                is-modal={true}\n                ref={(picker) => (this.pickerEle = picker)}\n                localization={this.localization}\n                selectedDate={this.value || this.initialPickerDate}\n                firstDayOfWeek={this.firstDayOfWeek}\n                color={this.color || undefined}\n              ></nano-date-picker>\n            </div>\n          </nano-dropdown>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-date-picker_2.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,a,n){function o(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,i){function r(e){try{d(n.next(e))}catch(t){i(t)}}function s(e){try{d(n["throw"](e))}catch(t){i(t)}}function d(e){e.done?a(e.value):o(e.value).then(r,s)}d((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,o,i,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(e){return function(t){return d([e,t])}}function d(r){if(n)throw new TypeError("Generator is already executing.");while(a)try{if(n=1,o&&(i=r[0]&2?o["return"]:r[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;if(o=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:a.label++;return{value:r[1],done:false};case 5:a.label++;o=r[1];r=[0];continue;case 7:r=a.ops.pop();a.trys.pop();continue;default:if(!(i=a.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6||r[0]===2)){a=0;continue}if(r[0]===3&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(r[0]===6&&a.label<i[1]){a.label=i[1];i=r;break}if(i&&a.label<i[2]){a.label=i[2];a.ops.push(r);break}if(i[2])a.ops.pop();a.trys.pop();continue}r=t.call(e,a)}catch(s){r=[6,s];o=0}finally{n=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{h,r as registerInstance,c as createEvent,e as Host,g as getElement}from"./index-20becda2.js";import{b as createIdentifier,D as DaysOfWeek$1,i as inRange$1,p as parseISODate,d as addDays$1,s as startOfWeek$1,e as endOfWeek$1,f as setMonth,g as startOfMonth$1,h as endOfMonth$1,j as clamp$1,k as setYear,a as printISODate}from"./date-utils-a67b6e21.js";import{c as createColorClasses}from"./theme-f5a16c79.js";import{P as Popover}from"./popover-05f61b5f.js";import{t as transitionDone}from"./utils-fd1ada22.js";import{a as getNearestTabbableElement}from"./tabbable-7818e4c2.js";var DaysOfWeek;(function(e){e[e["Sunday"]=0]="Sunday";e[e["Monday"]=1]="Monday";e[e["Tuesday"]=2]="Tuesday";e[e["Wednesday"]=3]="Wednesday";e[e["Thursday"]=4]="Thursday";e[e["Friday"]=5]="Friday";e[e["Saturday"]=6]="Saturday"})(DaysOfWeek||(DaysOfWeek={}));function isEqual(e,t){if(e==null||t==null){return false}return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function addDays(e,t){var a=new Date(e);a.setDate(a.getDate()+t);return a}function startOfWeek(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=new Date(e);var n=a.getDay();var o=(n<t?7:0)+n-t;a.setDate(a.getDate()-o);return a}function endOfWeek(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=new Date(e);var n=a.getDay();var o=(n<t?-7:0)+6-(n-t);a.setDate(a.getDate()+o);return a}function startOfMonth(e){return new Date(e.getFullYear(),e.getMonth(),1)}function endOfMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0)}function inRange(e,t,a){return clamp(e,t,a)===e}function clamp(e,t,a){var n=e.getTime();if(t&&t instanceof Date&&n<t.getTime()){return t}if(a&&a instanceof Date&&n>a.getTime()){return a}return e}function getDaysInRange(e,t){var a=[];var n=e;while(!isEqual(n,t)){a.push(n);n=addDays(n,1)}a.push(n);return a}function getViewOfMonth(e,t){if(t===void 0){t=DaysOfWeek.Monday}var a=startOfWeek(startOfMonth(e),t);var n=endOfWeek(endOfMonth(e),t);return getDaysInRange(a,n)}var DatePickerDay=function(e){var t=e.focusedDay,a=e.today,n=e.day,o=e.onDaySelect,i=e.onKeyboardNavigation,r=e.focusedDayRef,s=e.inRange,d=e.disabled,l=e.isSelected;var c=isEqual(n,a);var u=isEqual(n,t);var p=n.getMonth()!==t.getMonth()||d;var f=!s;function b(e){o(e,n)}return h("button",{class:{"duet-date__day":true,"is-outside":f,"is-disabled":p,"is-today":c},tabIndex:u?0:-1,onClick:b,onKeyDown:i,disabled:f,type:"button","aria-pressed":l?"true":"false",ref:function(e){if(u&&e&&r){r(e)}}},h("span",{"aria-hidden":"true"},n.getDate()),h("span",{class:"duet-date__vhidden"},n.toLocaleDateString(undefined,{day:"numeric",month:"long"})))};function chunk(e,t){var a=[];for(var n=0;n<e.length;n+=t){a.push(e.slice(n,n+t))}return a}function mapWithOffset(e,t,a){return e.map((function(n,o){var i=(o+t)%e.length;return a(e[i])}))}var DatePickerMonth=function(e){var t=e.selectedDate,a=e.focusedDate,n=e.labelledById,o=e.localization,i=e.firstDayOfWeek,r=e.min,s=e.max,d=e.onDateSelect,l=e.onKeyboardNavigation,c=e.focusedDayRef,u=e.onMouseDown,p=e.onFocusIn,f=e.isDateDisabled;var b=new Date;var g=getViewOfMonth(a,i);return h("table",{class:"duet-date__table",role:"grid","aria-labelledby":n,onFocusin:p,onMouseDown:u},h("thead",null,h("tr",null,mapWithOffset(o.dayNames,i,(function(e){return h("th",{class:"duet-date__table-header",scope:"col"},h("span",{"aria-hidden":"true"},e.substr(0,2)),h("span",{class:"duet-date__vhidden"},e))})))),h("tbody",null,chunk(g,7).map((function(e){return h("tr",{class:"duet-date__row"},e.map((function(e){return h("td",{class:"duet-date__cell",role:"gridcell","aria-selected":isEqual(e,t)?"true":undefined},h(DatePickerDay,{day:e,today:b,focusedDay:a,inRange:inRange(e,r,s),onDaySelect:d,onKeyboardNavigation:l,focusedDayRef:c,disabled:f(e),isSelected:isEqual(e,t)}))})))}))))};var localization={buttonLabel:"Choose date",placeholder:"YYYY-MM-DD",selectedDateMessage:"Selected date is",prevMonthLabel:"Previous month",nextMonthLabel:"Next month",monthSelectLabel:"Month",yearSelectLabel:"Year",closeLabel:"Close window",keyboardInstruction:"You can use arrow keys to navigate dates",calendarHeading:"Choose a date",dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNamesShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};var datePickerCss=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:"";background:var(--active-color);border-radius:50%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev nano-icon,.duet-date__next nano-icon{margin:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width:100%;z-index:1}.duet-date__select-label nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}';function range(e,t){var a=[];for(var n=e;n<=t;n++){a.push(n)}return a}var NanoDatePicker=function(){function e(e){var t=this;registerInstance(this,e);this.nanoDatePicked=createEvent(this,"nanoDatePicked",7);this.monthSelectId=createIdentifier("NanoDateMonth");this.yearSelectId=createIdentifier("NanoDateYear");this.dialogLabelId=createIdentifier("NanoDateLabel");this.initialTouchX=null;this.initialTouchY=null;this.activeFocus=false;this.focusedDay=new Date;this.selectedDate="";this.min="";this.max="";this.firstDayOfWeek=DaysOfWeek$1.Monday;this.localization=localization;this.isDateDisabled=function(){return false};this.isModal=false;this.enableActiveFocus=function(){t.activeFocus=true};this.disableActiveFocus=function(){t.activeFocus=false};this.handleTouchStart=function(e){var a=e.changedTouches[0];t.initialTouchX=a.pageX;t.initialTouchY=a.pageY};this.handleTouchMove=function(e){e.preventDefault()};this.handleTouchEnd=function(e){var a=e.changedTouches[0];var n=a.pageX-t.initialTouchX;var o=a.pageY-t.initialTouchY;var i=70;var r=Math.abs(n)>=i&&Math.abs(o)<=i;if(r){t.addMonths(n<0?1:-1)}t.initialTouchY=null;t.initialTouchX=null};this.handleNextMonthClick=function(e){e.preventDefault();t.addMonths(1)};this.handlePreviousMonthClick=function(e){e.preventDefault();t.addMonths(-1)};this.handleKeyboardNavigation=function(e){if(e.key==="Tab"&&!e.shiftKey&&t.isModal){e.preventDefault();var a=t.firstFocusEle||t.firstFocusableElement;a.focus();return}var n=true;switch(e.key){case"ArrowRight":t.addDays(1);break;case"ArrowLeft":t.addDays(-1);break;case"ArrowDown":t.addDays(7);break;case"ArrowUp":t.addDays(-7);break;case"PageUp":if(e.shiftKey){t.addYears(-1)}else{t.addMonths(-1)}break;case"PageDown":if(e.shiftKey){t.addYears(1)}else{t.addMonths(1)}break;case"Home":t.startOfWeek();break;case"End":t.endOfWeek();break;default:n=false}if(n){e.preventDefault();t.enableActiveFocus()}};this.handleDaySelect=function(e,a){var n=!t.isDateDisabled(a);var o=inRange$1(a,parseISODate(t.min),parseISODate(t.max));if(!o||!n){return}if(a.getMonth()===t.focusedDay.getMonth()){t.setValue(a)}else{t.setFocusedDay(a)}};this.handleMonthSelect=function(e){t.setMonth(parseInt(e.target.value,10))};this.handleYearSelect=function(e){t.setYear(parseInt(e.target.value,10))};this.processFocusedDayNode=function(e){t.focusedDayNode=e;if(t.activeFocus){setTimeout((function(){return e.focus()}),0)}}}e.prototype.setFocus=function(e){if(e===void 0){e=false}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(a){this.setFocusedDay(parseISODate(this.selectedDate)||new Date);if(e){setTimeout((function(e){return t.focusedDayNode.focus()}),20);return[2]}clearTimeout(this.focusTimeoutId);this.focusTimeoutId=setTimeout((function(){return t.monthSelectNode.focus()}),20);return[2]}))}))};e.prototype.handleSelectedDateChange=function(){this.setFocus(true)};e.prototype.addDays=function(e){this.setFocusedDay(addDays$1(this.focusedDay,e))};e.prototype.addMonths=function(e){this.setMonth(this.focusedDay.getMonth()+e)};e.prototype.addYears=function(e){this.setYear(this.focusedDay.getFullYear()+e)};e.prototype.startOfWeek=function(){this.setFocusedDay(startOfWeek$1(this.focusedDay,this.firstDayOfWeek))};e.prototype.endOfWeek=function(){this.setFocusedDay(endOfWeek$1(this.focusedDay,this.firstDayOfWeek))};e.prototype.setMonth=function(e){var t=setMonth(startOfMonth$1(this.focusedDay),e);var a=endOfMonth$1(t);var n=setMonth(this.focusedDay,e);this.setFocusedDay(clamp$1(n,t,a))};e.prototype.setYear=function(e){var t=setYear(startOfMonth$1(this.focusedDay),e);var a=endOfMonth$1(t);var n=setYear(this.focusedDay,e);this.setFocusedDay(clamp$1(n,t,a))};e.prototype.setFocusedDay=function(e){this.focusedDay=clamp$1(e,parseISODate(this.min),parseISODate(this.max))};e.prototype.setValue=function(e){this.selectedDate=printISODate(e);this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:e})};e.prototype.componentWillLoad=function(){this.handleSelectedDateChange()};e.prototype.render=function(){var e=this;var t=parseISODate(this.selectedDate);var a=(t||this.focusedDay).getFullYear();var n=this.focusedDay.getMonth();var o=this.focusedDay.getFullYear();var i=parseISODate(this.min);var r=parseISODate(this.max);var s=i!=null&&i.getMonth()===n&&i.getFullYear()===o;var d=r!=null&&r.getMonth()===n&&r.getFullYear()===o;var l=a-10;var c=a+10;if(i)l=i.getFullYear();if(r)c=r.getFullYear();return h(Host,{class:Object.assign({},createColorClasses(this.color))},h("div",{class:"duet-date"},h("div",{class:{"duet-date__dialog":true,"is-active":true},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},h("div",{class:"duet-date__dialog-content"},h("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),h("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},h("div",null,h("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[n]," ",this.focusedDay.getFullYear()),h("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:function(t){return e.firstFocusableElement=e.monthSelectNode=t},onChange:this.handleMonthSelect},this.localization.monthNames.map((function(e,t){return h("option",{key:e,value:t,selected:t===n,disabled:!inRange$1(new Date(o,t,1),i?startOfMonth$1(i):null,r?endOfMonth$1(r):null)},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,this.localization.monthNamesShort[n]),h("nano-icon",{name:"light/chevron-down"}))),h("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),h("div",{class:"duet-date__select"},h("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect},range(l,c).map((function(e){return h("option",{key:e,selected:e===o},e)}))),h("div",{class:"duet-date__select-label","aria-hidden":"true"},h("span",null,this.focusedDay.getFullYear()),h("nano-icon",{name:"light/chevron-down"})))),h("div",{class:"duet-date__nav"},h("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:s,type:"button"},h("nano-icon",{name:"light/chevron-left"}),h("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),h("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:d,type:"button"},h("nano-icon",{name:"light/chevron-right"}),h("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),h("div",null,h(DatePickerMonth,{selectedDate:t,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:i,max:r,isDateDisabled:this.isDateDisabled}))))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selectedDate:["handleSelectedDateChange"]}},enumerable:false,configurable:true});return e}();NanoDatePicker.style=datePickerCss;var dropdownCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300)}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{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}";var Dropdown=function(){function e(e){var t=this;registerInstance(this,e);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.dropdownId="dropdown-"+dropDownIds++;this.labelId=this.dropdownId+"-title";this.ignoreOpenWatcher=false;this.menuFocused=false;this.autoOpen=true;this.open=false;this.placement="bottom-start";this.closeOnSelect=true;this.distance=2;this.skidding=0;this.hoist=false;this.dialogTitle=null;this.handleTriggerKeyDown=function(e){if(!t.open&&["ArrowDown","ArrowUp"," "].includes(e.key)){t.show();e.preventDefault();e.stopPropagation()}};this.handleTriggerSlotChange=function(){t.updateAccessibleTrigger()};this.togglePanel=function(){if(!t.autoOpen)return;t.open?t.hide():t.show()}}e.prototype.handleOpenChange=function(){if(!this.ignoreOpenWatcher){this.open?this.show():this.hide();this.updateAccessibleTrigger()}};e.prototype.handlePopoverOptionsChange=function(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})};e.prototype.menuFocus=function(e){var t=e.target;if(!t||!t.tagName||t.tagName.toLowerCase()!=="nano-menu")return;this.menuFocused=true};e.prototype.secondaryOpen=function(e){var t=this;if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");transitionDone(this.panel).then((function(){return t.panel.classList.remove("loading")}));this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"};e.prototype.secondaryClose=function(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"};e.prototype.connectedCallback=function(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);this.handlePanelSelect=this.handlePanelSelect.bind(this);if(!this.containingElement)this.containingElement=this.host};e.prototype.componentDidLoad=function(){var e=this;this.popover=new Popover(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:function(){return e.nanoAfterHide.emit()},onAfterShow:function(){return e.nanoAfterShow.emit()},onTransitionEnd:function(){if(!e.open){e.panel.scrollTop=0}}});if(this.open){this.show()}};e.prototype.disconnectedCallback=function(){this.hide();if(this.popover)this.popover.destroy()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=true;e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return[2]}this.popover.show();this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.ignoreOpenWatcher=true;this.open=false;e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return[2]}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);this.menuFocused=false;return[2]}))}))};e.prototype.getMenu=function(){return this.host.querySelector("nano-menu")};e.prototype.handleDocumentKeyDown=function(e){var t=this;if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((function(){if(document.activeElement&&document.activeElement.closest(t.containingElement.tagName.toLowerCase())!==t.containingElement){t.hide();return}}))}var a=this.getMenu();if(a&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.menuFocused)return;e.preventDefault();a.setFocus();return}if(a&&e.target!==a){a.dispatchEvent(new KeyboardEvent(e.type,e));return}};e.prototype.handleDocumentMouseDown=function(e){var t=e.target;if(t.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}};e.prototype.handlePanelSelect=function(e){var t=e.target;if(this.closeOnSelect&&t.tagName.toLowerCase()==="nano-menu")this.hide()};e.prototype.updateAccessibleTrigger=function(){var e=Array.from(this.host.querySelectorAll('[slot="trigger"]'));var t=e.map(getNearestTabbableElement)[0];if(t){t.setAttribute("aria-haspopup","true");t.setAttribute("aria-expanded",this.open?"true":"false")}};e.prototype.render=function(){var e=this;return h("div",{part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open},"aria-expanded":this.open?"true":"false","aria-haspopup":"true"},h("span",{part:"trigger",class:"dropdown__trigger",ref:function(t){return e.trigger=t},onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},h("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),h("div",{ref:function(t){return e.positioner=t},class:"dropdown__positioner"},h("div",{ref:function(t){return e.panel=t},part:"panel",class:"dropdown__panel "+this.placement.split("-").join(" "),"aria-hidden":!this.open,role:"dialog","aria-modal":"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&h("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),h("slot",null))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}},enumerable:false,configurable:true});return e}();var dropDownIds=0;Dropdown.style=dropdownCss;export{NanoDatePicker as nano_date_picker,Dropdown as nano_dropdown};
+//# sourceMappingURL=nano-date-picker_2.entry.js.map

package/dist/esm-es5/nano-date-picker_2.entry.js.map

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

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

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

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

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

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

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

package/dist/esm-es5/nano-dialog.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dialog/dialog.scss?tag=nano-dialog&encapsulation=shadow","src/components/dialog/dialog.tsx"],"names":["dialogCss","id","Dialog","class_1","hostRef","_this","this","componentId","willShow","willHide","addedTransEnd","isVisible","noDismiss","hasFooter","showRibbon","open","label","noHeader","noFooter","noUserDismiss","storeMethod","handleKeyDown","event","key","requestClose","nanoOverlayDismiss","nanoRequestClose","emit","defaultPrevented","hide","setTimeout","_","handleTransitionEnd","propertyName","composedPath","find","node","panel","overlay","nanoAfterShow","nanoAfterHide","handleSlotChange","hasSlot","host","prototype","handleOpenChange","show","nanoShow","originalTrigger","document","activeElement","modal","activate","lockBodyScrolling","raf","nanoInitialFocus","focus","preventScroll","nanoHide","deactivate","unlockBodyScrolling","stopVideos","trigger","videos","Array","from","querySelectorAll","forEach","video","tagName","toLowerCase","pause","src","connectedCallback","Modal","addEventListener","componentWillLoad","storeId","ComponentStore","init","componentDidLoad","disconnectedCallback","removeEventListener","render","h","Host","showing","undefined","part","class","dialog","dialog--open","dialog--visible","dialog--has-footer","dialog--has-header","dialog--nodismiss","dialog--with-ribbon","onKeyDown","ref","el","onClick","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/layers';\n@import '../../global/style/nano-theme/form';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n * @prop --border-radius: defaults to #{$layer-border-radius};\n * @prop --content-background: defaults to #{$layer-bg-color};\n * @prop --footer-background: defaults to  #{$color-celsius};\n * @prop --box-shadow: defaults to $layer-shadow-xlarge;\n * @prop --close-button-color: defaults to #{$color-mediumgrey};\n * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n * @prop --tint-color: colour used to highlight items in the dialog - top ribbon, bottom close button. Default #{$color-blue};\n * @prop --width: defaults to 31rem;\n */\n:host {\n  --border-radius: #{$layer-border-radius};\n  --content-background: #fafafa;\n  --footer-content: #{$color-lightgrey};\n  --scrim-color: #{$layer-overlay-dark};\n  --box-shadow: #{$layer-shadow-large};\n  --close-button-color: #{$color-palegrey};\n  --width: 60rem;\n  --tint-color: #{$color-blue};\n  --body-padding-v: #{$spacing-large};\n  --body-padding-h: #{$spacing-large};\n  --header-padding-v: #{$spacing-medium};\n  --header-padding-h: #{$spacing-large};\n  --footer-padding-v: #{$spacing-medium};\n  --footer-padding-h: #{$spacing-large};\n}\n\n.dialog {\n  $self: &;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: #{$layer-index-modal};\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n\n  &__panel {\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    width: var(--width);\n    max-width: calc(100% - #{$spacing-xlarge});\n    max-height: calc(92% - #{$spacing-xlarge});\n    background-color: var(--content-background);\n    border-radius: var(--border-radius);\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transform: scale(0.8);\n    transition: #{$transition-fast} opacity, #{$transition-fast} transform;\n    overflow: auto;\n\n    &:focus {\n      outline: none;\n    }\n\n    .dialog--with-ribbon & {\n      border-top: 5px solid var(--tint-color);\n    }\n\n    .dialog--open & {\n      display: flex;\n      opacity: 1;\n      transform: none;\n    }\n\n    .dialog--nodismiss & {\n      animation: cannotClose 0.25s ease-in-out 1;\n\n      @keyframes cannotClose {\n        0% {\n          transform: scale(1);\n        }\n\n        50% {\n          transform: scale(1.08);\n        }\n\n        100% {\n          transform: scale(1);\n        }\n      }\n    }\n  }\n\n  &__header {\n    flex: 0 0 auto;\n    display: flex;\n    min-width: var(--width);\n    width: 100%;\n    background-color: var(--content-background);\n    border-radius: var(--border-radius) var(--border-radius) 0 0;\n    transition: #{$transition-xfast} box-shadow;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    [stuck] & {\n      box-shadow: #{$layer-shadow-medium};\n    }\n  }\n\n  &__title {\n    flex: 1 1 auto;\n    font-size: #{$fontsize-large};\n    line-height: 1.6;\n    padding: var(--header-padding-v) var(--header-padding-h);\n  }\n\n  & &__close-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{$fontsize-xlarge};\n    padding: 0 var(--header-padding-h);\n\n    --color: var(--close-button-color);\n  }\n\n  &__body {\n    padding: 0 var(--body-padding-h) var(--body-padding-v);\n\n    .dialog:not(.dialog--has-header) & {\n      padding-top: var(--body-padding-v);\n    }\n\n    & ::slotted(*) {\n      max-width: 100%;\n    }\n\n    &-wrap {\n      flex: 1 1 auto;\n      overflow: auto;\n      -webkit-overflow-scrolling: touch;\n      border-radius: var(--border-radius);\n\n      .dialog:not(.dialog--has-header) & {\n        border-radius: 0 0 inherit inherit;\n      }\n\n      .dialog:not(.dialog--has-footer) & {\n        border-radius: inherit inherit 0 0;\n      }\n    }\n  }\n\n  &__footer {\n    width: 100%;\n    padding: var(--footer-padding-v) var(--footer-padding-h);\n    background: var(--footer-content);\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n    position: relative;\n    top: 1px;\n\n    .dialog--visible & {\n      min-width: auto;\n    }\n\n    ::slotted(button) {\n      margin-right: #{$spacing-small} !important;\n    }\n\n    .dialog:not(.dialog--has-footer) & {\n      display: none;\n    }\n  }\n\n  &__close-txt {\n    color: var(--tint-color);\n    border: none;\n    text-decoration: underline;\n    margin: 0;\n    text-underline-offset: 4px;\n    background-color: transparent;\n    font: inherit;\n    -webkit-box-align: center;\n    cursor: pointer;\n    font-size: #{$fontsize-small};\n    padding: 0.5rem;\n    border-radius: #{$border-radius-small};\n    transition: box-shadow 100ms ease-in-out;\n\n    &:focus {\n      outline: none;\n      box-shadow: #{$control-focus-style};\n    }\n  }\n\n  &__overlay {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--scrim-color);\n    opacity: 0;\n    transition: #{$transition-fast} opacity;\n    backdrop-filter: blur(#{$layer-overlay-blur});\n\n    .dialog--open & {\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  ComponentInterface,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\nimport { hasSlot, raf } from '../../utils/utils';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\nlet id = 0;\n\n/**\n * Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-dialog',\n  styleUrl: 'dialog.scss',\n  shadow: true,\n})\nexport class Dialog implements ComponentInterface {\n  private componentId = `dialog-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n  private originalTrigger: HTMLElement | null;\n  private overlay: HTMLElement;\n  private addedTransEnd = false;\n\n  @Element() host: HTMLNanoDialogElement;\n  @State() isVisible = false;\n  @State() noDismiss = false;\n  @State() hasFooter = false;\n\n  /** Show a colour ribbon at the top of the modal */\n  @Prop() showRibbon = true;\n\n  /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The dialog's label as displayed in the header. You should always include a relevant\n   * label even when using `no-header`, as it is required for proper accessibility. */\n  @Prop() label = '';\n\n  /** Set to true to disable the header. This will also remove the default close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noHeader = false;\n\n  /** Set to true to disable the footer. This will also remove the footer close button,\n   * so please ensure you  provide an easy, accessible way for users to dismiss the dialog. */\n  @Prop() noFooter = false;\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent\n   * focus and allow you to set it on a different element in the dialog, such as an input or button. */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /** Emitted when the user clicks the close button, clicks the overlay, or presses the `Escape` key. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event() nanoRequestClose: EventEmitter;\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.originalTrigger = document.activeElement as HTMLElement;\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      raf(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n        if (!nanoInitialFocus.defaultPrevented) {\n          this.panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n    unlockBodyScrolling(this.host);\n    this.stopVideos();\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (trigger && typeof trigger.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    const nanoOverlayDismiss = this.nanoRequestClose.emit();\n\n    if (!nanoOverlayDismiss.defaultPrevented && !this.noUserDismiss) {\n      this.hide();\n    } else {\n      this.noDismiss = true;\n      setTimeout((_) => (this.noDismiss = false), 250);\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      // Ensure we only emit one event when the target element is no longer visible\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private stopVideos() {\n    var videos: (HTMLVideoElement | HTMLIFrameElement)[] = Array.from(\n      this.host.querySelectorAll('iframe,video')\n    );\n    videos.forEach((video) => {\n      if (video.tagName.toLowerCase() === 'video')\n        (video as HTMLVideoElement).pause();\n      else {\n        const src = video.src;\n        video.src = src;\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  render() {\n    return (\n      <Host showing={this.isVisible ? true : undefined}>\n        <div\n          part=\"base\"\n          class={{\n            dialog: true,\n            'dialog--open': this.open,\n            'dialog--visible': this.isVisible,\n            'dialog--has-footer': !this.noFooter,\n            'dialog--has-header': !this.noHeader,\n            'dialog--nodismiss': this.noDismiss,\n            'dialog--with-ribbon': this.showRibbon,\n          }}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div\n            part=\"overlay\"\n            class=\"dialog__overlay\"\n            ref={(el) => (this.overlay = el)}\n            onClick={this.requestClose}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"dialog__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            <div class=\"dialog__body-wrap\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <header part=\"header\" class=\"dialog__header\">\n                    <span\n                      part=\"title\"\n                      class=\"dialog__title\"\n                      id={`${this.componentId}-title`}\n                    >\n                      <slot name=\"label\">\n                        {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                        {this.label || String.fromCharCode(65279)}\n                      </slot>\n                    </span>\n                    {!this.noUserDismiss && (\n                      <nano-icon-button\n                        exportparts=\"base:close-button\"\n                        class=\"dialog__close-icon\"\n                        label=\"close dialog\"\n                        onClick={this.requestClose}\n                        iconName=\"light/times\"\n                      />\n                    )}\n                  </header>\n                </nano-sticker>\n              )}\n              <div part=\"body\" class=\"dialog__body\">\n                <slot />\n              </div>\n              {!this.noFooter && (this.hasFooter || !this.noUserDismiss) && (\n                <nano-sticker position=\"bottom\">\n                  <footer part=\"footer\" class=\"dialog__footer\">\n                    <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                    {!this.noUserDismiss && (\n                      <button\n                        class=\"dialog__close-txt\"\n                        onClick={this.requestClose}\n                      >\n                        Close\n                      </button>\n                    )}\n                  </footer>\n                </nano-sticker>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/esm-es5/nano-drawer.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,r,n){function o(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,i){function a(e){try{l(n.next(e))}catch(t){i(t)}}function s(e){try{l(n["throw"](e))}catch(t){i(t)}}function l(e){e.done?r(e.value):o(e.value).then(a,s)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},n,o,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(r)try{if(n=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:r.label++;return{value:a[1],done:false};case 5:r.label++;o=a[1];a=[0];continue;case 7:a=r.ops.pop();r.trys.pop();continue;default:if(!(i=r.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){r=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){r.label=a[1];break}if(a[0]===6&&r.label<i[1]){r.label=i[1];i=a;break}if(i&&r.label<i[2]){r.label=i[2];r.ops.push(a);break}if(i[2])r.ops.pop();r.trys.pop();continue}a=t.call(e,r)}catch(s){a=[6,s];o=0}finally{n=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,e as Host,g as getElement}from"./index-20becda2.js";import{u as unlockBodyScrolling,l as lockBodyScrolling}from"./scroll-4162ee24.js";import{M as Modal}from"./modal-1029407c.js";import"./dom-ae168a2d.js";import"./tabbable-7818e4c2.js";var drawerCss=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{position:relative;display:block;--size:25rem;--panel-background-color:white;--panel-shadow:0 4px 16px rgba(0, 0, 0, 0.1);--overlay-color:hsla(203, 10%, 20%, 0.5)}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:2000}.drawer__panel{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--panel-background-color);-webkit-box-shadow:var(--panel-shadow);box-shadow:var(--panel-shadow);-webkit-transition:250ms -webkit-transform;transition:250ms -webkit-transform;transition:250ms transform;transition:250ms transform, 250ms -webkit-transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--start .drawer__panel{left:0;right:auto;-webkit-transform:translate3d(-100%,  0,  0);transform:translate3d(-100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--start .drawer__panel[dir=rtl]{left:unset;right:unset;left:auto;right:0}.drawer--start .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * -100%),  0,  0);transform:translate3d(calc(-1 * -100%),  0,  0)}.drawer--end .drawer__panel{left:auto;right:0;-webkit-transform:translate3d(100%,  0,  0);transform:translate3d(100%,  0,  0);top:0;bottom:auto;width:var(--size);height:100%}.drawer--end .drawer__panel[dir=rtl]{left:unset;right:unset;left:0;right:auto}.drawer--end .drawer__panel[dir=rtl]{-webkit-transform:translate3d(calc(-1 * 100%),  0,  0);transform:translate3d(calc(-1 * 100%),  0,  0)}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, -100%);transform:translate(0, -100%)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);-webkit-transform:translate(0, 100%);transform:translate(0, 100%)}.drawer--open .drawer__panel{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.drawer__header{display:-webkit-box;display:-ms-flexbox;display:flex}.drawer__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:20px}.drawer__close{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.drawer__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--overlay-color);opacity:0;-webkit-transition:250ms opacity;transition:250ms opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:1}";var id=0;var Drawer=function(){function e(e){registerInstance(this,e);this.nanoShow=createEvent(this,"nanoShow",7);this.nanoAfterShow=createEvent(this,"nanoAfterShow",7);this.nanoHide=createEvent(this,"nanoHide",7);this.nanoAfterHide=createEvent(this,"nanoAfterHide",7);this.nanoOverlayDismiss=createEvent(this,"nanoOverlayDismiss",7);this.componentId="drawer-"+ ++id;this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="end";this.contained=false;this.noHeader=false;this.type="overlay"}e.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};e.prototype.handleTypeChange=function(){if(this.type!=="push"&&this.type!=="reveal")return;if(!this.contentEle){this.type="overlay";console.warn("a valid contentSelector must be set");return}};e.prototype.handleContentSelector=function(){if(!this.contentSelector)this.contentEle=null;else this.contentEle=this.host.ownerDocument.querySelector(this.contentSelector)};e.prototype.connectedCallback=function(){this.handleCloseClick=this.handleCloseClick.bind(this);this.handleTransitionEnd=this.handleTransitionEnd.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);this.handleOverlayClick=this.handleOverlayClick.bind(this);this.handleSlotChange=this.handleSlotChange.bind(this);this.modal=new Modal(this.host)};e.prototype.componentWillLoad=function(){if(this.open){this.show()}this.handleContentSelector()};e.prototype.disconnectedCallback=function(){unlockBodyScrolling(this.host)};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;var t=this;return __generator(this,(function(r){if(this.isVisible){return[2]}e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();lockBodyScrolling(this.host)}if(!this.contentEle||this.type!=="push"&&this.type!=="reveal")return[2];this.contentEle.style.right="0";this.contentEle.style.transition="all ease 250ms";this.contentEle.style.position="relative";this.contentEle.style.overflow="hidden";setTimeout((function(e){return t.contentEle.style.right="25rem"}),0);return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){if(!this.isVisible){return[2]}e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;return[2]}this.open=false;this.modal.deactivate();unlockBodyScrolling(this.host);if(!this.contentEle)return[2];this.contentEle.style.transition="";this.contentEle.style.position="";this.contentEle.style.overflow="";this.contentEle.style.right="";return[2]}))}))};e.prototype.handleCloseClick=function(){this.hide()};e.prototype.handleKeyDown=function(e){if(e.key==="Escape"){this.hide()}};e.prototype.handleOverlayClick=function(){var e=this.nanoOverlayDismiss.emit();if(!e.defaultPrevented){this.hide()}};e.prototype.handleSlotChange=function(){this.hasFooter=!!this.host.querySelector('[slot="footer"]')};e.prototype.handleTransitionEnd=function(e){var t=e.target;if(e.propertyName==="transform"&&t.classList.contains("drawer__panel")){this.isVisible=this.open;this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit();if(this.open){this.panel.focus()}}};e.prototype.render=function(){var e;var t=this;var r="drawer--"+this.placement;var n="drawer--"+this.type;var o=this.host.ownerDocument.dir==="rtl";return h(Host,{dir:o?"rtl":null},h("div",{part:"base",class:(e={drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible},e[n]=true,e[r]=true,e["drawer--contained"]=this.contained,e["drawer--fixed"]=!this.contained,e["drawer--has-footer"]=this.hasFooter,e),onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},h("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick}),h("div",{ref:function(e){return t.panel=e},part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?this.componentId+"-title":null,tabIndex:0},!this.noHeader&&h("header",{part:"header",class:"drawer__header"},h("span",{part:"title",class:"drawer__title",id:this.componentId+"-title"},h("slot",{name:"label"},this.label||String.fromCharCode(65279)))),h("div",{part:"body",class:"drawer__body"},h("slot",null)),h("footer",{part:"footer",class:"drawer__footer"},h("slot",{name:"footer",onSlotchange:this.handleSlotChange})))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],type:["handleTypeChange"],contentSelector:["handleContentSelector"]}},enumerable:false,configurable:true});return e}();Drawer.style=drawerCss;export{Drawer as nano_drawer};
+//# sourceMappingURL=nano-drawer.entry.js.map

package/dist/esm-es5/nano-drawer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"otDAAA,IAAMA,UAAY,qtGCelB,IAAIC,GAAK,MAaIC,OAAM,WALnB,SAAAC,EAAAC,qSAMUC,KAAAC,YAAc,aAAYL,GAOzBI,KAAAE,UAAY,MACZF,KAAAG,UAAY,MAKmBH,KAAAI,KAAO,MAMvCJ,KAAAK,MAAQ,GAGRL,KAAAM,UAAgD,MAMhDN,KAAAO,UAAY,MAMZP,KAAAQ,SAAW,MAKXR,KAAAS,KAAsC,UAW9CX,EAAAY,UAAAC,iBAAA,WACEX,KAAKI,KAAOJ,KAAKY,OAASZ,KAAKa,QAIjCf,EAAAY,UAAAI,iBAAA,WACE,GAAId,KAAKS,OAAS,QAAUT,KAAKS,OAAS,SAAU,OACpD,IAAKT,KAAKe,WAAY,CACpBf,KAAKS,KAAO,UACZO,QAAQC,KAAK,uCACb,SAKJnB,EAAAY,UAAAQ,sBAAA,WACE,IAAKlB,KAAKmB,gBAAiBnB,KAAKe,WAAa,UAE3Cf,KAAKe,WAAcf,KAAKoB,KAAKC,cAA2BC,cACtDtB,KAAKmB,kBA6BXrB,EAAAY,UAAAa,kBAAA,WACEvB,KAAKwB,iBAAmBxB,KAAKwB,iBAAiBC,KAAKzB,MACnDA,KAAK0B,oBAAsB1B,KAAK0B,oBAAoBD,KAAKzB,MACzDA,KAAK2B,cAAgB3B,KAAK2B,cAAcF,KAAKzB,MAC7CA,KAAK4B,mBAAqB5B,KAAK4B,mBAAmBH,KAAKzB,MACvDA,KAAK6B,iBAAmB7B,KAAK6B,iBAAiBJ,KAAKzB,MAEnDA,KAAK8B,MAAQ,IAAIC,MAAM/B,KAAKoB,OAG9BtB,EAAAY,UAAAsB,kBAAA,WAEE,GAAIhC,KAAKI,KAAM,CACbJ,KAAKY,OAEPZ,KAAKkB,yBAGPpB,EAAAY,UAAAuB,qBAAA,WACEC,oBAAoBlC,KAAKoB,OAKrBtB,EAAAY,UAAAE,KAAN,iHAEE,GAAIZ,KAAKG,UAAW,CAClB,MAAA,CAAA,GAGIgC,EAAWnC,KAAKmC,SAASC,OAC/B,GAAID,EAASE,iBAAkB,CAC7BrC,KAAKI,KAAO,MACZ,MAAA,CAAA,GAGFJ,KAAKG,UAAY,KACjBH,KAAKI,KAAO,KAGZ,IAAKJ,KAAKO,UAAW,CACnBP,KAAK8B,MAAMQ,WACXC,kBAAkBvC,KAAKoB,MAGzB,IAAKpB,KAAKe,YAAef,KAAKS,OAAS,QAAUT,KAAKS,OAAS,SAC7D,MAAA,CAAA,GACFT,KAAKe,WAAWyB,MAAMC,MAAQ,IAC9BzC,KAAKe,WAAWyB,MAAME,WAAa,iBACnC1C,KAAKe,WAAWyB,MAAMG,SAAW,WACjC3C,KAAKe,WAAWyB,MAAMI,SAAW,SACjCC,YAAW,SAACC,GAAC,OAAMC,EAAKhC,WAAWyB,MAAMC,MAAQ,UAAU,oBAKvD3C,EAAAY,UAAAG,KAAN,sGAEE,IAAKb,KAAKG,UAAW,CACnB,MAAA,CAAA,GAGI6C,EAAWhD,KAAKgD,SAASZ,OAC/B,GAAIY,EAASX,iBAAkB,CAC7BrC,KAAKI,KAAO,KACZ,MAAA,CAAA,GAGFJ,KAAKI,KAAO,MACZJ,KAAK8B,MAAMmB,aAEXf,oBAAoBlC,KAAKoB,MAEzB,IAAKpB,KAAKe,WAAY,MAAA,CAAA,GACtBf,KAAKe,WAAWyB,MAAME,WAAa,GACnC1C,KAAKe,WAAWyB,MAAMG,SAAW,GACjC3C,KAAKe,WAAWyB,MAAMI,SAAW,GACjC5C,KAAKe,WAAWyB,MAAMC,MAAQ,oBAGxB3C,EAAAY,UAAAc,iBAAA,WACNxB,KAAKa,QAGCf,EAAAY,UAAAiB,cAAA,SAAcuB,GACpB,GAAIA,EAAMC,MAAQ,SAAU,CAC1BnD,KAAKa,SAIDf,EAAAY,UAAAkB,mBAAA,WACN,IAAMwB,EAAmBpD,KAAKqD,mBAAmBjB,OAEjD,IAAKgB,EAAiBf,iBAAkB,CACtCrC,KAAKa,SAIDf,EAAAY,UAAAmB,iBAAA,WACN7B,KAAKE,YAAcF,KAAKoB,KAAKE,cAAc,oBAGrCxB,EAAAY,UAAAgB,oBAAA,SAAoBwB,GAC1B,IAAMI,EAASJ,EAAMI,OAGrB,GACEJ,EAAMK,eAAiB,aACvBD,EAAOE,UAAUC,SAAS,iBAC1B,CACAzD,KAAKG,UAAYH,KAAKI,KACtBJ,KAAKI,KAAOJ,KAAK0D,cAActB,OAASpC,KAAK2D,cAAcvB,OAE3D,GAAIpC,KAAKI,KAAM,CACbJ,KAAK4D,MAAMC,WAKjB/D,EAAAY,UAAAoD,OAAA,iBAAA,IAAAf,EAAA/C,KACE,IAAM+D,EAAiB,WAAa/D,KAAKM,UACzC,IAAM0D,EAAY,WAAahE,KAAKS,KAEpC,IAAIwD,EAASjE,KAAKoB,KAAKC,cAA2B6C,MAAQ,MAE1D,OACEC,EAACC,KAAI,CAACF,IAAKD,EAAQ,MAAQ,MACzBE,EAAA,MAAA,CACEE,KAAK,OACLC,OAAKC,EAAA,CACHC,OAAQ,KACRC,eAAgBzE,KAAKI,KACrBsE,kBAAmB1E,KAAKG,WACxBoE,EAACP,GAAY,KACbO,EAACR,GAAiB,KAClBQ,EAAA,qBAAqBvE,KAAKO,UAC1BgE,EAAA,kBAAkBvE,KAAKO,UACvBgE,EAAA,sBAAsBvE,KAAKE,aAE7ByE,UAAW3E,KAAK2B,cAChBiD,gBAAiB5E,KAAK0B,qBAEtByC,EAAA,MAAA,CACEE,KAAK,UACLC,MAAM,kBACNO,QAAS7E,KAAK4B,qBAGhBuC,EAAA,MAAA,CACEW,IAAK,SAACC,GAAE,OAAMhC,EAAKa,MAAQmB,GAC3BV,KAAK,QACLC,MAAM,gBACNU,KAAK,SAAQC,aACF,OAAMC,cACJlF,KAAKI,KAAO,QAAU,OAAM+E,aAC7BnF,KAAKQ,SAAWR,KAAKK,MAAQ,KAAI+E,mBAE1CpF,KAAKQ,SAAcR,KAAKC,YAAW,SAAW,KAEjDoF,SAAU,IAERrF,KAAKQ,UACL2D,EAAA,SAAA,CAAQE,KAAK,SAASC,MAAM,kBAC1BH,EAAA,OAAA,CACEE,KAAK,QACLC,MAAM,gBACN1E,GAAOI,KAAKC,YAAW,UAEvBkE,EAAA,OAAA,CAAMmB,KAAK,SAERtF,KAAKK,OAASkF,OAAOC,aAAa,UAO3CrB,EAAA,MAAA,CAAKE,KAAK,OAAOC,MAAM,gBACrBH,EAAA,OAAA,OAGFA,EAAA,SAAA,CAAQE,KAAK,SAASC,MAAM,kBAC1BH,EAAA,OAAA,CAAMmB,KAAK,SAASG,aAAczF,KAAK6B,uVAzRlC","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}