@nanoporetech-digital/components 1.13.10 → 1.13.14

package/dist/nano-components/p-95435d60.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["DateRegxps","d","m","y","inputIds","DateInput","[object Object]","hostRef","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","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","undefined","async","input","getInputElement","length","setCustomValidity","showError","dropdown","open","validateFirst","reportValidity","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","splice","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","firstFocusEle","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: .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\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 .001s ease 1s, background .2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index .001s ease, background .2s ease .001s;\n        background: rgba(0, 0, 0, .5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\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 { Component, ComponentInterface, Element, h, Prop, Watch, State, Event, EventEmitter, Host, Method } from '@stencil/core';\nimport { createDate, DaysOfWeek, printISODate, parseISODate } from '../../utils/date-utils';\n\nimport { PickerChangeEvent, DateInputChangeEventDetail, Color, LocalDateOpts, DuetLocalizedText, ControlValidity, ControlValidityEventDetail } 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\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 = { year: 'numeric', month: 'long', day: 'numeric' };\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({ mutable: true }) 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, max: Date, error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error = 'Date below the minimum: ' + min.toLocaleDateString(undefined, this.helperTextFormat);\n      } else if (this.max && (max = parseISODate(this.max)) && valueDate > max) {\n        error = 'Date above the maximum: ' + 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') 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 => dateRegexOrdered.push(DateRegxps[datepart]) );\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) { this.value = inputValue; return; }\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' = (this.host.ownerDocument as Document).dir === 'rtl' ? 'bottom-start' : '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={this.placeholder !== 'false' ? this.placeholder : undefined}\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 }}><slot name=\"helper\" /></span>\n                {(this.helperText && !!valueDate) &&\n                  <span>{valueDate.toLocaleDateString(undefined, this.helperTextFormat)}</span>\n                }\n              </span>\n            }\n          </nano-input>\n          <nano-dropdown 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/nano-components/p-9ce201b0.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,i){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function r(e){try{l(i.next(e))}catch(t){o(t)}}function s(e){try{l(i["throw"](e))}catch(t){o(t)}}function l(e){e.done?n(e.value):a(e.value).then(r,s)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,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 l([e,t])}}function l(r){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;a=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=t.call(e,n)}catch(s){r=[6,s];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-ccc72ce4.system.js","./p-1e7fd1f2.system.js","./p-8c6418d2.system.js","./p-cb5fb88f.system.js","./p-7a7ae5a9.system.js","./p-be88c3ef.system.js"],(function(e){"use strict";var t,n,i,a,o,r,s,l,d,c;return{setters:[function(e){t=e.r;n=e.c;i=e.h;a=e.e;o=e.g},function(e){r=e.M},function(e){s=e.r},function(e){l=e.l;d=e.u},function(e){c=e.c},function(){},function(){}],execute:function(){var u=":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));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){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}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;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-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__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;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__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;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__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(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";var f=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"});var h=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"});var p=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"});var b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"});var m=e("nano_alert",function(){function e(e){var a=this;t(this,e);this.nanoShow=n(this,"nanoShow",7);this.nanoAfterShow=n(this,"nanoAfterShow",7);this.nanoHide=n(this,"nanoHide",7);this.nanoAfterHide=n(this,"nanoAfterHide",7);this.addedTransEnd=false;this.isModal=false;this.isToast=false;this.isShowing=false;this.open=false;this.closable=false;this.duration=Infinity;this.handleMouseMove=function(){a.restartAutoHide()};this.handleCloseClick=function(){a.hide()};this.handleTransitionEnd=function(e){if(e.propertyName==="opacity"&&e.composedPath().find((function(e){return e===a.panel||e===a.overlay}))){a.isShowing=a.open;a.host.hidden=!a.open;a.open?a.nanoAfterShow.emit():a.nanoAfterHide.emit()}};this.handleButtonClick=function(e){var t=e.target;if(e.defaultPrevented)return;if(t.tagName&&t.tagName.toLowerCase()==="button")a.hide()};this.restartAutoHide=function(){clearTimeout(a.autoHideTimeout);if(a.open&&a.duration<Infinity){a.autoHideTimeout=setTimeout((function(){return a.hide()}),a.duration)}};this.Panel=function(){return i("div",{ref:function(e){return a.panel=e},part:"panel",class:{alert:true,"alert--open":a.open,"alert--toasty":a.isToast,"alert--modal":!!a.isModal,"alert--showing":a.isShowing},role:!!a.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":a.open?"false":"true","aria-modal":!!a.isModal?"true":undefined,"aria-label":a.label?a.label:undefined,onMouseMove:a.handleMouseMove,tabIndex:!!a.isModal?0:undefined},i("div",{class:"alert__content"},i("div",{part:"icon",class:"alert__icon"},i("slot",{name:"icon"})),i("div",{part:"message",class:"alert__message"},i("slot",null)),a.closable&&i("div",{class:"alert__close"},i("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:a.handleCloseClick}))),i("div",{class:"alert__footer"},i("slot",{name:"footer"})))}}e.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};e.prototype.handleDurationChange=function(){this.restartAutoHide()};e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var e;var t=this;return __generator(this,(function(n){if(this.isShowing){return[2]}e=this.nanoShow.emit();if(e.defaultPrevented){return[2,false]}this.host.hidden=false;this.open=true;s((function(){return t.isShowing=true}));if(this.duration<Infinity){clearTimeout(this.autoHideTimeout);this.autoHideTimeout=setTimeout((function(){return t.hide()}),this.duration)}return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){if(!this.isShowing){return[2]}e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;return[2,false]}clearTimeout(this.autoHideTimeout);this.open=false;return[2]}))}))};e.prototype.toast=function(e){if(e===void 0){e="tr"}return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(n){this.isToast=true;return[2,new Promise((function(n){var i;switch(e){case"tl":i=h;break;case"bl":i=p;break;case"br":i=b;break;default:i=f;break}if(!i.parentElement){document.body.appendChild(i)}i.appendChild(t.host);t.connectedCallback();t.show();t.host.addEventListener("nanoAfterHide",(function(){t.host.remove();t.isToast=false;n();if(!i.querySelector("nano-alert")){i.remove()}}),{once:true})}))]}))}))};e.prototype.alert=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(n){this.isModal=true;this.label=e;return[2,new Promise((function(e){if(!document.body.contains(t.host)){document.body.appendChild(t.host)}t.modal.activate();l(t.host);t.originalTrigger=document.activeElement;s((function(){t.show();t.panel.focus({preventScroll:true})}));t.host.addEventListener("nanoAfterHide",(function(){t.modal.deactivate();t.host.remove();t.label=undefined;t.isModal=false;e();if(t.originalTrigger&&typeof t.originalTrigger.focus==="function"){setTimeout((function(){return t.originalTrigger.focus()}))}}),{once:true})}))]}))}))};e.prototype.connectedCallback=function(){this.modal=new r(this.host);this.host.addEventListener("click",this.handleButtonClick);if(this.panel){this.addedTransEnd=true;this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};e.prototype.disconnectedCallback=function(){d(this.host);this.host.removeEventListener("click",this.handleButtonClick);this.addedTransEnd=false;this.panel.removeEventListener("transitionend",this.handleTransitionEnd)};e.prototype.componentDidLoad=function(){if(this.open){this.show()}if(!this.addedTransEnd){this.panel.addEventListener("transitionend",this.handleTransitionEnd)}};e.prototype.render=function(){var e=this;return i(a,{class:Object.assign({},c(this.color)),showing:this.isShowing},this.isModal&&[i("div",{part:"overlay",class:{alert__overlay:true,"alert__overlay--open":this.open},ref:function(t){return e.overlay=t}}),i("div",{class:"alert__modal-wrap"},i(this.Panel,null))],!this.isModal&&i(this.Panel,null))};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}},enumerable:false,configurable:true});return e}());m.style=u}}}));
-//# sourceMappingURL=p-9ce201b0.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["alertCss","toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","exports","class_1","hostRef","_this","this","addedTransEnd","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","composedPath","find","node","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","target","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","prototype","handleOpenChange","show","handleDurationChange","nanoShow","raf","nanoHide","toast","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","addEventListener","remove","querySelector","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","focus","preventScroll","deactivate","Modal","disconnectedCallback","unlockBodyScrolling","removeEventListener","componentDidLoad","render","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"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\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: #{$transition-medium} opacity ease, #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty, &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\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-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  @include padding(0, #{$spacing-medium}, 0, 0);\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__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  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import { Component, ComponentInterface , Element, Event, EventEmitter, Method, Prop, State, Watch, h, Host, VNode } from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport { createColorClasses, lockBodyScrolling, raf, unlockBodyScrolling } from '../../utils/utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--tr' });\nconst toastStackTl = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--tl' });\nconst toastStackBl = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--bl' });\nconst toastStackBr = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--br' });\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.isShowing) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.host.clientWidth;\n    this.open = true;\n    raf(() => this.isShowing = true);\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (!this.isShowing) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>(resolve => {\n      let toastStack: HTMLElement;\n      switch(position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\n          this.host.remove();\n          this.isToast = false;\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (!toastStack.querySelector('nano-alert')) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>(resolve => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n        this.panel.focus({ preventScroll: true });\n      });\n\n      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\n          this.modal.deactivate();\n          this.host.remove();\n          this.label = undefined;\n          this.isModal = false;\n          resolve();\n\n          // Restore focus to the original trigger\n          if (this.originalTrigger && typeof this.originalTrigger.focus === 'function') {\n            setTimeout(() => this.originalTrigger.focus());\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.propertyName === 'opacity' && event.composedPath().find((node) => node === this.panel || node === this.overlay)) {\n      this.isShowing = this.open;\n      this.host.hidden = !this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  }\n\n  private handleButtonClick = (event: Event) => {\n    const target = event.target as HTMLElement;\n    if (event.defaultPrevented) return;\n    if (target.tagName && target.tagName.toLowerCase() === 'button') this.hide();\n  }\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return <div\n      ref={el => (this.panel = el)}\n      part=\"panel\"\n      class={{\n        alert: true,\n        'alert--open': this.open,\n        'alert--toasty': this.isToast,\n        'alert--modal': !!this.isModal,\n        'alert--showing': this.isShowing\n      }}\n      role={!!this.isModal ? 'alertdialog' : 'alert'}\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      aria-hidden={this.open ? 'false' : 'true'}\n      aria-modal={!!this.isModal ? 'true' : undefined}\n      aria-label={this.label ? this.label : undefined}\n      onMouseMove={this.handleMouseMove}\n      tabIndex={!!this.isModal ? 0 : undefined}\n    >\n      <div class=\"alert__content\">\n        <div part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </div>\n        <div part=\"message\" class=\"alert__message\">\n          <slot />\n        </div>\n        {this.closable && (\n          <div class=\"alert__close\">\n            <nano-icon-button class=\"alert__close\" iconName=\"light/times\" label=\"close menu\" onClick={this.handleCloseClick}></nano-icon-button>\n          </div>\n        )}\n      </div>\n      <div class=\"alert__footer\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }} showing={this.isShowing}>\n        {this.isModal &&\n          [\n            <div part=\"overlay\" class={{\n              'alert__overlay': true,\n              'alert__overlay--open': this.open}}\n              ref={div => this.overlay = div}\n            />,\n            <div class=\"alert__modal-wrap\">\n              <this.Panel />\n            </div>\n          ]\n        }\n        {!this.isModal &&\n          <this.Panel />\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-9d612d93.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function u(t){try{l(r.next(t))}catch(e){i(e)}}function a(t){try{l(r["throw"](t))}catch(e){i(e)}}function l(t){t.done?n(t.value):o(t.value).then(u,a)}l((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,o,i,u;return u={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function a(t){return function(e){return l([t,e])}}function l(u){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(i=u[0]&2?o["return"]:u[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,u[1])).done)return i;if(o=0,i)u=[u[0]&2,i.value];switch(u[0]){case 0:case 1:i=u;break;case 4:n.label++;return{value:u[1],done:false};case 5:n.label++;o=u[1];u=[0];continue;case 7:u=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(u[0]===6||u[0]===2)){n=0;continue}if(u[0]===3&&(!i||u[1]>i[0]&&u[1]<i[3])){n.label=u[1];break}if(u[0]===6&&n.label<i[1]){n.label=i[1];i=u;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(u);break}if(i[2])n.ops.pop();n.trys.pop();continue}u=e.call(t,n)}catch(a){u=[6,a];o=0}finally{r=i=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-3b21dfce.system.js","./p-8407e325.system.js"],(function(t){"use strict";var e,n,r,o,i,u;return{setters:[function(t){e=t.r;n=t.c;r=t.h;o=t.e;i=t.g},function(t){u=t.W}],execute:function(){var a=t("nano_algolia_pagination",function(){function t(t){e(this,t);this.nanoPageChanged=n(this,"nanoPageChanged",7);this.currentPage=null;this.canGoPrev=false;this.canGoNext=false;this.show=true;this.indexResults=null;this.infiniteScroll=false;this.maxToShow=null}t.prototype.currentPageChange=function(){};t.prototype.infiniteScrollChange=function(){this.show=!this.infiniteScroll};t.prototype.nextPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.prevPage=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2]}))}))};t.prototype.goToPage=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){console.log(t);return[2]}))}))};t.prototype.updateContent=function(){this.outputTo=this.outputSlot||this.outputEle;if(!this.templateStr||!this.outputTo||!this.indexResults){this.show=false;return}};t.prototype.componentWillLoad=function(){this.templateSlot=this.el.querySelector('[slot="filter-template"]');this.outputSlot=this.el.querySelector('[slot="output"]');if(!!this.templateSlot)this.templateStr=this.templateSlot.innerHTML};t.prototype.componentDidLoad=function(){this.updateContent()};t.prototype.render=function(){var t=this;return r(o,{class:{"show-pagination":this.show}},r("div",{ref:function(e){return t.outputEle=e}},r("slot",{name:"output"})))};Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{currentPage:["currentPageChange"],infiniteScroll:["infiniteScrollChange"]}},enumerable:false,configurable:true});return t}());u(a,["indexResults","filterChanged","tplRenderFn"])}}}));
-//# sourceMappingURL=p-9d612d93.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/algolia/algolia-pagination.tsx"],"names":["AlgoliaPagination","exports","class_1","hostRef","this","currentPage","canGoPrev","canGoNext","show","indexResults","infiniteScroll","maxToShow","prototype","currentPageChange","infiniteScrollChange","nextPage","prevPage","goToPage","page","console","log","updateContent","outputTo","outputSlot","outputEle","templateStr","componentWillLoad","templateSlot","el","querySelector","innerHTML","componentDidLoad","render","_this","h","Host","class","show-pagination","ref","div","name","Wormhole"],"mappings":"6oDAWaA,EAAiBC,EAAA,0BAAA,WAJ9B,SAAAC,EAAAC,8DAaWC,KAAAC,YAAsB,KACtBD,KAAAE,UAAqB,MACrBF,KAAAG,UAAqB,MACrBH,KAAAI,KAAgB,KAEhBJ,KAAAK,aAA4B,KAC5BL,KAAAM,eAA0B,MAE3BN,KAAAO,UAAoB,KAQ5BT,EAAAU,UAAAC,kBAAA,aAIAX,EAAAU,UAAAE,qBAAA,WACEV,KAAKI,MAAQJ,KAAKM,gBAIdR,EAAAU,UAAAG,SAAN,iHAKMb,EAAAU,UAAAI,SAAN,iHAKMd,EAAAU,UAAAK,SAAN,SAAeC,wFACbC,QAAQC,IAAIF,oBAGNhB,EAAAU,UAAAS,cAAA,WACNjB,KAAKkB,SAAWlB,KAAKmB,YAAcnB,KAAKoB,UACxC,IAAKpB,KAAKqB,cAAgBrB,KAAKkB,WAAalB,KAAKK,aAAc,CAC7DL,KAAKI,KAAO,MACZ,SASJN,EAAAU,UAAAc,kBAAA,WACEtB,KAAKuB,aAAevB,KAAKwB,GAAGC,cAAc,4BAC1CzB,KAAKmB,WAAanB,KAAKwB,GAAGC,cAAc,mBAExC,KAAMzB,KAAKuB,aAAcvB,KAAKqB,YAAcrB,KAAKuB,aAAaG,WAIhE5B,EAAAU,UAAAmB,iBAAA,WACE3B,KAAKiB,iBAGPnB,EAAAU,UAAAoB,OAAA,WAAA,IAAAC,EAAA7B,KACE,OACE8B,EAACC,EAAI,CAACC,MAAO,CACXC,kBAAmBjC,KAAKI,OAExB0B,EAAA,MAAA,CAAKI,IAAK,SAAAC,GAAO,OAAAN,EAAKT,UAAYe,IAChCL,EAAA,OAAA,CAAMM,KAAK,8SA/ES,IAuF9BC,EAAUzC,EAAmD,CAAC,eAAgB,gBAAiB","sourcesContent":["import { Component, h, Element, Host, Prop, Watch, State, Method, Event, EventEmitter } from '@stencil/core';\nimport { IndexResult } from '../../interface';\nimport { Wormhole, WormholeConsumerConstructor } from '../algolia/algolia-data';\n\n/**\n * Displays results from Algolia searches.\n * TODO / WIP */\n@Component({\n  tag: 'nano-algolia-pagination',\n  shadow: true\n})\nexport class AlgoliaPagination {\n  @Element() el: HTMLNanoAlgoliaPaginationElement;\n\n  private outputEle: HTMLDivElement;\n  private outputSlot: HTMLElement;\n  private outputTo: HTMLElement;\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n\n  @State() currentPage: number = null;\n  @State() canGoPrev: boolean = false;\n  @State() canGoNext: boolean = false;\n  @State() show: boolean = true;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() indexResults: IndexResult = null;\n  @State() infiniteScroll: boolean = false;\n\n  @Prop() maxToShow: number = null;\n\n  /**\n   * Emitted when the page number changes\n   */\n  @Event() nanoPageChanged!: EventEmitter<{ page: number }>;\n\n  @Watch('currentPage')\n  currentPageChange() {\n  }\n\n  @Watch('infiniteScroll')\n  infiniteScrollChange() {\n    this.show = !this.infiniteScroll;\n  }\n\n  @Method()\n  async nextPage() {\n\n  }\n\n  @Method()\n  async prevPage() {\n\n  }\n\n  @Method()\n  async goToPage(page: number) {\n    console.log(page)\n  }\n\n  private updateContent() {\n    this.outputTo = this.outputSlot || this.outputEle;\n    if (!this.templateStr || !this.outputTo || !this.indexResults) {\n      this.show = false;\n      return;\n    }\n\n    // this.outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n    //   orig: { ...this.currentIndex.origFilters[this.filterName] },\n    //   dyn: { ...this.currentIndex.dynFilters[this.filterName] }\n    // });\n  }\n\n  componentWillLoad() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n\n    if (!!this.templateSlot) this.templateStr = this.templateSlot.innerHTML;\n    // this.boundChangeEvent = this.handleChangeEvent.bind(this);\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n  }\n\n  render() {\n    return (\n      <Host class={{\n        'show-pagination': this.show\n      }}>\n        <div ref={div => this.outputEle = div}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    )\n  }\n}\n\n// Use the injectProps method to pass from the tunnel as props to the component\nWormhole((AlgoliaPagination as WormholeConsumerConstructor), ['indexResults', 'filterChanged', 'tplRenderFn']);\n"]}

package/dist/nano-components/p-9e581080.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as a,e,g as o}from"./p-7a6bc3c5.js";import{M as s}from"./p-062f8187.js";import{r}from"./p-190e2d91.js";import{l as n,u as l}from"./p-768fb4c8.js";import{c}from"./p-88d68319.js";import"./p-25387b50.js";import"./p-4087e0d9.js";const d=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tr"}),h=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--tl"}),b=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--bl"}),m=Object.assign(document.createElement("div"),{className:"nano-toast-stack nano-toast-stack--br"}),p=class{constructor(e){t(this,e),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7),this.addedTransEnd=!1,this.isModal=!1,this.isToast=!1,this.isShowing=!1,this.open=!1,this.closable=!1,this.duration=1/0,this.handleMouseMove=()=>{this.restartAutoHide()},this.handleCloseClick=()=>{this.hide()},this.handleTransitionEnd=t=>{"opacity"===t.propertyName&&t.composedPath().find((t=>t===this.panel||t===this.overlay))&&(this.isShowing=this.open,this.host.hidden=!this.open,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit())},this.handleButtonClick=t=>{const i=t.target;t.defaultPrevented||i.tagName&&"button"===i.tagName.toLowerCase()&&this.hide()},this.restartAutoHide=()=>{clearTimeout(this.autoHideTimeout),this.open&&this.duration<1/0&&(this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))},this.Panel=()=>a("div",{ref:t=>this.panel=t,part:"panel",class:{alert:!0,"alert--open":this.open,"alert--toasty":this.isToast,"alert--modal":!!this.isModal,"alert--showing":this.isShowing},role:this.isModal?"alertdialog":"alert","aria-live":"assertive","aria-atomic":"true","aria-hidden":this.open?"false":"true","aria-modal":this.isModal?"true":void 0,"aria-label":this.label?this.label:void 0,onMouseMove:this.handleMouseMove,tabIndex:this.isModal?0:void 0},a("div",{class:"alert__content"},a("div",{part:"icon",class:"alert__icon"},a("slot",{name:"icon"})),a("div",{part:"message",class:"alert__message"},a("slot",null)),this.closable&&a("div",{class:"alert__close"},a("nano-icon-button",{class:"alert__close",iconName:"light/times",label:"close menu",onClick:this.handleCloseClick}))),a("div",{class:"alert__footer"},a("slot",{name:"footer"})))}handleOpenChange(){this.open?this.show():this.hide()}handleDurationChange(){this.restartAutoHide()}async show(){if(!this.isShowing)return!this.nanoShow.emit().defaultPrevented&&(this.host.hidden=!1,this.open=!0,r((()=>this.isShowing=!0)),void(this.duration<1/0&&(clearTimeout(this.autoHideTimeout),this.autoHideTimeout=setTimeout((()=>this.hide()),this.duration))))}async hide(){if(this.isShowing)return this.nanoHide.emit().defaultPrevented?(this.open=!0,!1):(clearTimeout(this.autoHideTimeout),void(this.open=!1))}async toast(t="tr"){return this.isToast=!0,new Promise((i=>{let a;switch(t){case"tl":a=h;break;case"bl":a=b;break;case"br":a=m;break;default:a=d}a.parentElement||document.body.appendChild(a),a.appendChild(this.host),this.connectedCallback(),this.show(),this.host.addEventListener("nanoAfterHide",(()=>{this.host.remove(),this.isToast=!1,i(),a.querySelector("nano-alert")||a.remove()}),{once:!0})}))}async alert(t){return this.isModal=!0,this.label=t,new Promise((t=>{document.body.contains(this.host)||document.body.appendChild(this.host),this.modal.activate(),n(this.host),this.originalTrigger=document.activeElement,r((()=>{this.show(),this.panel.focus({preventScroll:!0})})),this.host.addEventListener("nanoAfterHide",(()=>{this.modal.deactivate(),this.host.remove(),this.label=void 0,this.isModal=!1,t(),this.originalTrigger&&"function"==typeof this.originalTrigger.focus&&setTimeout((()=>this.originalTrigger.focus()))}),{once:!0})}))}connectedCallback(){this.modal=new s(this.host),this.host.addEventListener("click",this.handleButtonClick),this.panel&&(this.addedTransEnd=!0,this.panel.addEventListener("transitionend",this.handleTransitionEnd))}disconnectedCallback(){l(this.host),this.host.removeEventListener("click",this.handleButtonClick),this.addedTransEnd=!1,this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}componentDidLoad(){this.open&&this.show(),this.addedTransEnd||this.panel.addEventListener("transitionend",this.handleTransitionEnd)}render(){return a(e,{class:Object.assign({},c(this.color)),showing:this.isShowing},this.isModal&&[a("div",{part:"overlay",class:{alert__overlay:!0,"alert__overlay--open":this.open},ref:t=>this.overlay=t}),a("div",{class:"alert__modal-wrap"},a(this.Panel,null))],!this.isModal&&a(this.Panel,null))}get host(){return o(this)}static get watchers(){return{open:["handleOpenChange"],duration:["handleDurationChange"]}}};p.style=":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));--border-color:var(--nano-layer-border-color, rgba(0, 0, 0, 0.1));--border-width:var(--nano-layer-border-width, 1px);--background:var(--nano-layer-bg, #fff);--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--icon-size:2rem;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--close-button-color:#b5aea7;display:block}:host(.nano-color){--tint-color:var(--nano-color-base, var(--nano-color-primary, #0084a9))}.alert{position:relative;background-color:var(--background);border:solid var(--border-width) var(--border-color);border-top-width:4px;border-top-color:var(--tint-color);border-radius:var(--border-radius);opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease;transition:var(--nano-transition-medium, 0.5s) opacity ease, var(--nano-transition-fast, 0.3s) transform ease}.alert:focus{outline:none}.alert:not(.alert--showing){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}.alert--open{opacity:1;-webkit-transform:none;transform:none}.alert--toasty,.alert--modal{-webkit-box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));margin:var(--nano-spacing-medium, 16px)}.alert__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.alert__modal-wrap{position:fixed;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-alert, 800)}.alert__message{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--nano-spacing-medium, 16px);overflow:hidden;line-height:1.6}.alert__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;font-size:1.1em;padding-left:0;padding-right:var(--nano-spacing-medium, 16px);padding-top:0;padding-bottom:0;--color:var(--close-button-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__close{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--nano-spacing-medium, 16px);padding-inline-end:var(--nano-spacing-medium, 16px)}}.alert__footer{padding:0 var(--nano-spacing-small, 8px) 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.alert__footer ::slotted(*),.alert__footer::slotted(*){-webkit-box-flex:1;-ms-flex:1;flex:1;margin:0 var(--nano-spacing-small, 8px) var(--nano-spacing-medium, 16px) !important}.alert__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;z-index:var(--nano-layer-index-alert, 800);-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.alert__overlay--open{opacity:1}.alert__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(--icon-size)}.alert__icon::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px)}.alert__icon ::slotted(*){color:var(--tint-color);margin-left:var(--nano-spacing-medium, 16px);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.alert__icon ::slotted(*){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--nano-spacing-medium, 16px);margin-inline-start:var(--nano-spacing-medium, 16px);-webkit-margin-end:0;margin-inline-end:0}}";export{p as nano_alert}
-//# sourceMappingURL=p-9e581080.entry.js.map

package/dist/nano-components/p-9e581080.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/alert/alert.scss?tag=nano-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"names":["toastStackTr","Object","assign","document","createElement","className","toastStackTl","toastStackBl","toastStackBr","Alert","[object Object]","hostRef","this","addedTransEnd","isModal","isToast","isShowing","open","closable","duration","Infinity","handleMouseMove","restartAutoHide","handleCloseClick","hide","handleTransitionEnd","event","propertyName","composedPath","find","node","panel","overlay","host","hidden","nanoAfterShow","emit","nanoAfterHide","handleButtonClick","target","defaultPrevented","tagName","toLowerCase","clearTimeout","autoHideTimeout","setTimeout","Panel","h","ref","el","part","class","alert","alert--open","alert--toasty","alert--modal","alert--showing","role","aria-live","aria-atomic","aria-hidden","aria-modal","undefined","aria-label","label","onMouseMove","tabIndex","name","iconName","onClick","show","nanoShow","raf","nanoHide","position","Promise","resolve","toastStack","parentElement","body","appendChild","connectedCallback","addEventListener","remove","querySelector","once","contains","modal","activate","lockBodyScrolling","originalTrigger","activeElement","focus","preventScroll","deactivate","Modal","unlockBodyScrolling","removeEventListener","Host","createColorClasses","color","showing","alert__overlay","alert__overlay--open","div"],"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\n:host {\n  /**\n   * @prop --border-radius: defaults to #{$layer-border-radius};\n   * @prop --border-color: defaults to #{$layer-border-color};\n   * @prop --border-width: defaults to #{$layer-border-width};\n   * @prop --background: defaults to #{$layer-bg-color};\n   * @prop --tint-color: defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --icon-size: defaults to 1.5rem;\n   * @prop --scrim-color: overlay colour of alert display. Defaults to #{$layer-overlay-dark};\n   * @prop --close-button-color: defaults to #{$color-mediumgrey} ;\n   */\n\n  --border-radius: #{$layer-border-radius};\n  --border-color: #{$layer-border-color};\n  --border-width: #{$layer-border-width};\n  --background: #{$layer-bg-color};\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --icon-size: 2rem;\n  --scrim-color: #{$layer-overlay-dark};\n  --close-button-color: #{$color-palegrey};\n\n  display: block;\n}\n\n:host(.nano-color) {\n  --tint-color: var(--nano-color-base, #{nano-color(primary, base)});\n}\n\n.alert {\n  position: relative;\n  background-color: var(--background);\n  border: solid var(--border-width) var(--border-color);\n  border-top-width: 4px;\n  border-top-color: var(--tint-color);\n  border-radius: var(--border-radius);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: #{$transition-medium} opacity ease, #{$transition-fast} transform ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(.alert--showing) {\n    @include hidden;\n  }\n\n  &--open {\n    opacity: 1;\n    transform: none;\n  }\n\n  &--toasty, &--modal {\n    box-shadow: #{$layer-shadow-large};\n    margin: #{$spacing-medium};\n  }\n}\n\n.alert__content {\n  display: flex;\n  align-items: stretch;\n}\n\n.alert__modal-wrap {\n  position: fixed;\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-alert};\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: #{$spacing-medium};\n  overflow: hidden;\n  line-height: 1.6;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.1em;\n  @include padding(0, #{$spacing-medium}, 0, 0);\n  --color: var(--close-button-color);\n}\n\n.alert__footer {\n  padding: 0 #{$spacing-small} 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  align-items: center;\n\n  ::slotted(*),\n  &::slotted(*) {\n    flex: 1;\n    margin: 0 #{$spacing-small} #{$spacing-medium} !important;\n  }\n}\n\n.alert__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  z-index: #{$layer-index-alert};\n  backdrop-filter: blur(#{$layer-overlay-blur});\n\n  &--open {\n    opacity: 1;\n  }\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--icon-size);\n\n  &::slotted(*) {\n    color: var(--tint-color);\n    margin-left: #{$spacing-medium};\n  }\n}\n\n.alert__icon ::slotted(*) {\n  color: var(--tint-color);\n  @include margin(0, 0, 0, #{$spacing-medium});\n}\n","import { Component, ComponentInterface , Element, Event, EventEmitter, Method, Prop, State, Watch, h, Host, VNode } from '@stencil/core';\nimport { Color } from '../../interface';\nimport Modal from '../../utils/modal';\nimport { createColorClasses, lockBodyScrolling, raf, unlockBodyScrolling } from '../../utils/utils';\n\nconst toastStackTr = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--tr' });\nconst toastStackTl = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--tl' });\nconst toastStackBl = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--bl' });\nconst toastStackBr = Object.assign(document.createElement('div'), { className: 'nano-toast-stack nano-toast-stack--br' });\n\n/**\n * Alerts are used to display important messages either inline, as toast notifications or as modals requiring action.\n * @slot - The alert's content.\n * @slot icon - An icon to show in the alert.\n * @slot footer - Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method.\n */\n@Component({\n  tag: 'nano-alert',\n  styleUrl: 'alert.scss',\n  shadow: true\n})\nexport class Alert implements ComponentInterface {\n  private autoHideTimeout: ReturnType<typeof setTimeout>;\n  private panel: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n  private originalTrigger: HTMLElement | null;\n  private addedTransEnd = false;\n\n  @State() isModal = false;\n  @State() isToast = false;\n  @State() isShowing = false;\n  @State() label: string;\n\n  @Element() host: HTMLNanoAlertElement;\n\n  /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Set to true to make the alert closable. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** The color to use from the application's color palette. */\n  @Prop({ reflect: true }) color?: Color;\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\n   * alert before it closes (e.g. moves the mouse over it), the timer will restart.\n   */\n  @Prop() duration = Infinity;\n\n  @Watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the alert opens and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the alert closes and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n\n  /** Shows the alert. */\n  @Method()\n  async show() {\n    if (this.isShowing) {\n      return;\n    }\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      return false;\n    }\n\n    this.host.hidden = false;\n    this.host.clientWidth;\n    this.open = true;\n    raf(() => this.isShowing = true);\n\n    if (this.duration < Infinity) {\n      clearTimeout(this.autoHideTimeout);\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  /** Hides the alert */\n  @Method()\n  async hide() {\n    if (!this.isShowing) {\n      return;\n    }\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return false;\n    }\n\n    clearTimeout(this.autoHideTimeout);\n    this.open = false;\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   *\n   * @param position options are tr (top-right - default), tl (top-left), br (bottom-right), bl (bottom-left)\n   * @returns a promise which will resolve after the alert has hidden\n   */\n  @Method()\n  async toast(position: 'tr' | 'tl' | 'bl' | 'br' = 'tr') {\n    this.isToast = true;\n    return new Promise<void>(resolve => {\n      let toastStack: HTMLElement;\n      switch(position) {\n        case 'tl':\n          toastStack = toastStackTl;\n          break;\n        case 'bl':\n          toastStack = toastStackBl;\n          break;\n        case 'br':\n          toastStack = toastStackBr;\n          break;\n        default:\n          toastStack = toastStackTr;\n          break;\n      }\n\n      if (!toastStack.parentElement) {\n        document.body.appendChild(toastStack);\n      }\n\n      toastStack.appendChild(this.host);\n      this.connectedCallback();\n      this.show();\n\n      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\n          this.host.remove();\n          this.isToast = false;\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (!toastStack.querySelector('nano-alert')) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  /**\n   * Displays the alert as a dialog / modal - more akin to a traditional js alert().\n   * @param label a label for assistive technology\n   */\n  @Method()\n  async alert(label: string) {\n    this.isModal = true;\n    this.label = label;\n\n    return new Promise<void>(resolve => {\n      if (!document.body.contains(this.host)) {\n        document.body.appendChild(this.host);\n      }\n\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      raf(() => {\n        this.show();\n        this.panel.focus({ preventScroll: true });\n      });\n\n      this.host.addEventListener(\n        'nanoAfterHide',\n        () => {\n          this.modal.deactivate();\n          this.host.remove();\n          this.label = undefined;\n          this.isModal = false;\n          resolve();\n\n          // Restore focus to the original trigger\n          if (this.originalTrigger && typeof this.originalTrigger.focus === 'function') {\n            setTimeout(() => this.originalTrigger.focus());\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private handleMouseMove = () => {\n    this.restartAutoHide();\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  }\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (event.propertyName === 'opacity' && event.composedPath().find((node) => node === this.panel || node === this.overlay)) {\n      this.isShowing = this.open;\n      this.host.hidden = !this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n    }\n  }\n\n  private handleButtonClick = (event: Event) => {\n    const target = event.target as HTMLElement;\n    if (event.defaultPrevented) return;\n    if (target.tagName && target.tagName.toLowerCase() === 'button') this.hide();\n  }\n\n  private restartAutoHide = () => {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);\n    }\n  }\n\n  connectedCallback() {\n    this.modal = new Modal(this.host);\n    this.host.addEventListener('click', this.handleButtonClick);\n\n    if (this.panel) {\n      this.addedTransEnd = true;\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n    this.host.removeEventListener('click', this.handleButtonClick);\n\n    this.addedTransEnd = false;\n    this.panel.removeEventListener('transitionend', this.handleTransitionEnd);\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    if (!this.addedTransEnd) {\n      this.panel.addEventListener('transitionend', this.handleTransitionEnd);\n    }\n  }\n\n  private Panel = (): VNode => {\n    return <div\n      ref={el => (this.panel = el)}\n      part=\"panel\"\n      class={{\n        alert: true,\n        'alert--open': this.open,\n        'alert--toasty': this.isToast,\n        'alert--modal': !!this.isModal,\n        'alert--showing': this.isShowing\n      }}\n      role={!!this.isModal ? 'alertdialog' : 'alert'}\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      aria-hidden={this.open ? 'false' : 'true'}\n      aria-modal={!!this.isModal ? 'true' : undefined}\n      aria-label={this.label ? this.label : undefined}\n      onMouseMove={this.handleMouseMove}\n      tabIndex={!!this.isModal ? 0 : undefined}\n    >\n      <div class=\"alert__content\">\n        <div part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\" />\n        </div>\n        <div part=\"message\" class=\"alert__message\">\n          <slot />\n        </div>\n        {this.closable && (\n          <div class=\"alert__close\">\n            <nano-icon-button class=\"alert__close\" iconName=\"light/times\" label=\"close menu\" onClick={this.handleCloseClick}></nano-icon-button>\n          </div>\n        )}\n      </div>\n      <div class=\"alert__footer\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }} showing={this.isShowing}>\n        {this.isModal &&\n          [\n            <div part=\"overlay\" class={{\n              'alert__overlay': true,\n              'alert__overlay--open': this.open}}\n              ref={div => this.overlay = div}\n            />,\n            <div class=\"alert__modal-wrap\">\n              <this.Panel />\n            </div>\n          ]\n        }\n        {!this.isModal &&\n          <this.Panel />\n        }\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-import{r as o,c as n,j as t,h as r,e as i,g as a}from"./p-7a6bc3c5.js";import{d as e}from"./p-3796f493.js";import{g as s}from"./p-88d68319.js";const c=class{constructor(t){o(this,t),this.nanoValidate=n(this,"nanoValidate",7),this.grpId="nano-checkbox-group-"+h++,this.errorMessage="",this.showErrorMsg=!1,this.hasHelperSlot=!1,this.validateOn="submit",this.showInlineError=!0,this.min=0,this.max=null,this.disabled=null,this.legend="",this.handleInvalid=o=>{this.invalid=!0,"submit"===this.validateOn&&(this.invalid=this.showErrorMsg=this.customValidate()),this.showInlineError&&o.preventDefault(),setTimeout((()=>this.showInlineValidation(o)),20)},this.showInlineValidation=o=>{this.nativeCbs&&this.nativeCbs.length&&("submitThenDirty"===this.validateOn&&(this.validateOn="dirty"),this.showErrorMsg=!1,this.invalid=!1,this.nativeCbs.forEach(((o,n)=>{o.validity.valid||(this.errorMessage=o.validationMessage,this.showErrorMsg=!0,this.invalid=!0,this.showInlineError&&this.checkboxes[n].setFocus())})),this.nanoValidate.emit({isValid:!this.invalid,errorMessage:this.errorMessage,originalEvent:o}))}}async reportValidity(o){return o&&this.showInlineValidation(),{isValid:!this.invalid,errorMessage:this.errorMessage}}handleCbChange(){this.invalid&&(this.showErrorMsg=this.invalid=!1),this.customValidate(),"dirty"===this.validateOn&&this.showInlineValidation()}customValidate(){if(!this.nativeCbs||!this.nativeCbs.length||!this.checkboxes)return;let o=this.nativeCbs.filter((o=>"checkbox"===o.type));if(!o||!o.length)return;let n=o.filter((o=>o.checked)).length,t=!1;return this.checkboxes.forEach((o=>{o.setError(""),t||(this.min&&n<this.min&&(o.setError(`You must select a minimum of ${this.min} values.`),t=!0),this.max&&n>this.max&&(o.setError(`Only up to ${this.max} values are allowed.`),t=!0))})),t}handleComponentChange(){this.checkboxTypes=s(this.checkboxes.map((o=>"types-"+o.type)))}handleDisabledChange(){null!==this.disabled&&this.checkboxes.map((o=>o.disabled=this.disabled))}attachSlotObserver(){(this.mo=new MutationObserver((()=>this.handleSlotChange()))).observe(this.host,{childList:!0})}async handleSlotChange(){t(this.host),this.checkboxes=Array.from(this.host.querySelectorAll("nano-checkbox")),this.hasHelperSlot=!!this.host.querySelector('[slot="helper"]'),this.nativeCbs=await Promise.all(this.checkboxes.reduce(((o,n)=>(o.push(n.getInputElement()),o)),[])),this.nativeCbs.forEach((o=>o.addEventListener("invalid",this.handleInvalid)))}componentWillLoad(){this.showInlineValidation=e(this.showInlineValidation,20),this.customValidate=this.customValidate.bind(this)}connectedCallback(){this.attachSlotObserver()}disconnectedCallback(){this.mo&&this.mo.disconnect()}render(){const o=this.grpId+"-lbl",n=this.showInlineError||this.hasHelperSlot?this.grpId+"-more":"";return r(i,Object.assign({},this.checkboxTypes,{dir:"rtl"===this.host.ownerDocument.dir?"rtl":null}),r("fieldset",{disabled:this.disabled,class:{nanogroupcb:!0,"show-error":this.showErrorMsg}},r("legend",{class:"nanogroupcb__legend",id:o},this.legend),r("div",{class:"nanogroupcb__cbs",role:"group","aria-labelledby":o+" "+n},r("slot",null)),(this.showInlineError||this.hasHelperSlot)&&r("div",{class:"nanogroupcb__more",id:n},this.showInlineError?r("div",{class:"nanogroupcb__error"},this.errorMessage):"",r("div",{class:"nanogroupcb__help"},r("slot",{name:"helper"})))))}get host(){return a(this)}static get watchers(){return{validateOn:["handleCbChange"],min:["handleCbChange"],max:["handleCbChange"],nativeCbs:["customValidate"],checkboxes:["handleComponentChange","handleDisabledChange"],disabled:["handleDisabledChange"]}}};let h=0;c.style='.sc-nano-checkbox-group-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox-group,*.sc-nano-checkbox-group::before,*.sc-nano-checkbox-group::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-checkbox-group:export{screen:1000}.sc-nano-checkbox-group-h{--control-margin-top:0px;--control-margin-end:0px;--control-margin-bottom:0px;--control-margin-start:0px;--invalid-msg-color:var(--nano-color-danger, #ef4135);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #687576);--label-color:var(--nano-input-label-color, "currentColor");--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--label-padding:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));display:block}.sc-nano-checkbox-group-h *.sc-nano-checkbox-group{-webkit-box-sizing:inherit;box-sizing:inherit}[types-tag].sc-nano-checkbox-group-h,[types-segment].sc-nano-checkbox-group-h{--control-margin-top:0px;--control-margin-end:8px;--control-margin-bottom:8px;--control-margin-start:0px}[types-checkbox].sc-nano-checkbox-group-h,[types-radio].sc-nano-checkbox-group-h{--control-margin-top:0px;--control-margin-end:10px;--control-margin-bottom:0px;--control-margin-start:0px}.nanogroupcb.sc-nano-checkbox-group{border:none;margin:0;padding:0}.nanogroupcb__legend.sc-nano-checkbox-group,.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group,.nanogroupcb__more.sc-nano-checkbox-group{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nanogroupcb__legend.sc-nano-checkbox-group{font-size:var(--label-font-size);padding:0 0 var(--label-padding);margin:0;line-height:1}[invalid].sc-nano-checkbox-group-h:not([invalid=false]) .nanogroupcb__legend.sc-nano-checkbox-group{color:var(--label-color--invalid)}.nanogroupcb__more.sc-nano-checkbox-group{height:1em;margin-left:3px;margin-right:0;margin-top:calc(var(--label-padding) - var(--control-margin-bottom));margin-bottom:var(--label-padding);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__more.sc-nano-checkbox-group{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.nanogroupcb__error.sc-nano-checkbox-group,.nanogroupcb__help.sc-nano-checkbox-group{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group,.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:1}.nanogroupcb__error.sc-nano-checkbox-group{color:var(--invalid-msg-color);font-stretch:condensed;opacity:0}.show-error.sc-nano-checkbox-group .nanogroupcb__error.sc-nano-checkbox-group{opacity:1}.nanogroupcb__help.sc-nano-checkbox-group{font-style:italic;opacity:1;color:var(--help-msg-color)}.show-error.sc-nano-checkbox-group .nanogroupcb__help.sc-nano-checkbox-group{opacity:0}.nanogroupcb__cbs.sc-nano-checkbox-group{margin:0;padding:0;line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]),.nanogroupcb__cbs .sc-nano-checkbox-group-s>*:not([type=tag]):not([type=segment]):not([type=segment-pill]){--check-base-size:1.2em;font-size:0.85em}.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:var(--control-margin-start);margin-top:var(--control-margin-top);margin-right:var(--control-margin-end);margin-bottom:var(--control-margin-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanogroupcb__cbs.sc-nano-checkbox-group-s>*,.nanogroupcb__cbs .sc-nano-checkbox-group-s>*{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--control-margin-start);margin-inline-start:var(--control-margin-start);-webkit-margin-end:var(--control-margin-end);margin-inline-end:var(--control-margin-end)}}';export{c as nano_checkbox_group}
-//# sourceMappingURL=p-a0aa7781.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"names":["CheckboxGroup","[object Object]","hostRef","this","grpId","grpIds","errorMessage","showErrorMsg","hasHelperSlot","validateOn","showInlineError","min","max","disabled","legend","handleInvalid","ev","invalid","customValidate","preventDefault","setTimeout","_","showInlineValidation","nativeCbs","length","forEach","cb","i","validity","valid","validationMessage","checkboxes","setFocus","nanoValidate","emit","isValid","originalEvent","validateFirst","onlyCbs","filter","type","checked","setError","checkboxTypes","getClassMap","map","mo","MutationObserver","handleSlotChange","observe","host","childList","forceUpdate","Array","from","querySelectorAll","querySelector","Promise","all","reduce","acc","push","getInputElement","addEventListener","debounce","bind","attachSlotObserver","disconnect","legendId","moreId","h","Host","Object","assign","dir","ownerDocument","class","nanogroupcb","show-error","id","role","aria-labelledby","name"],"mappings":"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","sourcesContent":["@import \"../../global/style/utilities/globals\";\n@import \"../../global/style/nano-theme/form\";\n@import \"../../global/style/nano-theme/base\";\n\n:host {\n  /**\n   * @prop --control-margin-top: Margin between controls. Default depends on control type;\n   * @prop --control-margin-end: Margin between controls. Default depends on control type;\n   * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n   * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n   * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default #{$input-help-font-size};\n\n   * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{$input-help-color};\n\n   * @prop --label-color: Default #{$label-color};\n   * @prop --label-color--invalid: Default #{$label-color-invalid};\n   * @prop --label-font-size: Default #{$label-font-size};\n   * @prop --label-padding: space between legend and control. Default #{$input-padding-bottom};\n  */\n\n  --control-margin-top: 0px;\n  --control-margin-end: 0px;\n  --control-margin-bottom: 0px;\n  --control-margin-start: 0px;\n\n  --invalid-msg-color: #{nano-color(danger, base)};\n  --invalid-msg-font-size: #{$input-help-font-size};\n\n  --help-msg-color: #{$input-help-color};\n\n  --label-color: #{$label-color};\n  --label-color--invalid: #{$label-color-invalid};\n  --label-font-size: #{$label-font-size};\n  --label-padding: #{$input-padding-bottom};\n\n  display: block;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([types-tag]),\n:host([types-segment]) {\n  --control-margin-top: 0px;\n  --control-margin-end: 8px;\n  --control-margin-bottom: 8px;\n  --control-margin-start: 0px;\n}\n\n:host([types-checkbox]),\n:host([types-radio]) {\n  --control-margin-top: 0px;\n  --control-margin-end: 10px;\n  --control-margin-bottom: 0px;\n  --control-margin-start: 0px;\n}\n\n.nanogroupcb {\n  border: none;\n  margin: 0;\n  padding: 0;\n\n  &__legend, &__error, &__help, &__more {\n    display: block;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__legend {\n    font-size: var(--label-font-size);\n    padding: 0 0 var(--label-padding);\n    margin: 0;\n    line-height: 1;\n\n    :host([invalid]:not([invalid=\"false\"])) & {\n      color: var(--label-color--invalid);\n    }\n  }\n\n  &__more {\n    height: 1em;\n    @include margin(calc(var(--label-padding) - var(--control-margin-bottom)), 0, var(--label-padding), 3px);\n    position: relative;\n  }\n\n  &__error, &__help {\n    top: 0;\n    left: 0;\n    position: absolute;\n    font-size: var(--invalid-msg-font-size);\n    line-height: 1.2;\n    transition: 0.3s ease-out opacity;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    font-stretch: condensed;\n    opacity: 0;\n\n    .show-error & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .show-error & {\n      opacity: 0;\n    }\n  }\n\n  &__cbs {\n    margin: 0;\n    padding: 0;\n    line-height: 1;\n    display: flex;\n    flex-wrap: wrap;\n\n    ::slotted(*:not([type=\"tag\"]):not([type=\"segment\"]):not([type=\"segment-pill\"])) {\n      --check-base-size: 1.2em;\n      font-size: .85em;\n    }\n\n    ::slotted(*) {\n      margin-left: var(--control-margin-start);\n      margin-top: var(--control-margin-top);\n      margin-right: var(--control-margin-end);\n      margin-bottom: var(--control-margin-bottom);\n    }\n  }\n}\n\n/* autoprefixer: ignore next */\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n  .nanogroupcb__cbs {\n    &::slotted(*),\n    ::slotted(*) {\n      margin-left: unset;\n      margin-right: unset;\n\n      margin-inline-start: var(--control-margin-start);\n      margin-inline-end: var(--control-margin-end);\n    }\n  }\n}\n","import { Component, Prop, Element, h, ComponentInterface, State, Listen, Watch, Host, Method, forceUpdate, Event, EventEmitter } from '@stencil/core';\nimport { CssClassMap, ControlValidityEventDetail, ControlValidity } from '../../interface';\nimport { debounce, getClassMap } from '../../utils/utils';\n\n/**\n * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n *\n * @slot - Used for grouping checkboxes inside the group wrapper\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  scoped: true\n})\nexport class CheckboxGroup implements ComponentInterface {\n  private mo?: MutationObserver;\n  private checkboxTypes: CssClassMap;\n  private grpId = `nano-checkbox-group-${grpIds++}`;\n\n  @Element() host: HTMLNanoCheckboxGroupElement;\n\n  // internal state\n\n  @State() checkboxes: HTMLNanoCheckboxElement[];\n  @State() nativeCbs: HTMLInputElement[];\n  @State() errorMessage: string = '';\n  @State() showErrorMsg = false;\n  @State() hasHelperSlot = false;\n\n  // public properties\n\n  /**\n   * When should the field perform validation\n   */\n   @Prop({ mutable: true }) 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 minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n   * A validation error will be thrown if not enough controls are checked.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n   * Other controls will automatically be disabled upon reaching this number.\n   */\n  @Prop() max: number = null;\n\n  /**\n   * Disable all the nested form controls\n   */\n  @Prop({ reflect: true }) disabled: boolean | null = null;\n\n  /**\n   * A common label for children controls\n   */\n  @Prop() legend: string = '';\n\n  /**\n   * @internal - just a hook for styling on the current validity state\n   */\n  @Prop({ reflect: true, mutable: true }) invalid: boolean;\n\n  // Public 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    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage\n    }\n  }\n\n  // Events\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  // listeners & watchers\n\n  /**\n   * Notes on validation... custom validation messages should be set\n   * no matter whether we show inline messages or native html5.\n   * this will mean forms cannot submit when there are pending validation issues.\n   */\n  @Listen('nanoChange')\n  @Watch('validateOn')\n  @Watch('min')\n  @Watch('max')\n  handleCbChange() {\n    if (this.invalid) this.showErrorMsg = this.invalid = false;\n    this.customValidate();\n\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  @Watch('nativeCbs')\n  customValidate() {\n    if (!this.nativeCbs || !this.nativeCbs.length || !this.checkboxes) return;\n\n    // we only care about checkbox controls.\n    let onlyCbs = this.nativeCbs.filter(cb => cb.type === 'checkbox')\n    if (!onlyCbs || !onlyCbs.length) return;\n\n    let checked = onlyCbs.filter(cb => cb.checked).length;\n    let invalid = false;\n\n    this.checkboxes.forEach(cb => {\n      cb.setError('');\n      if (invalid) return;\n\n      if (this.min && checked < this.min) {\n        cb.setError(`You must select a minimum of ${this.min} values.`);\n        invalid = true;\n      }\n      if (this.max && checked > this.max) {\n        cb.setError(`Only up to ${this.max} values are allowed.`);\n        invalid = true;\n      }\n    })\n    return invalid;\n  }\n\n  @Watch('checkboxes')\n  handleComponentChange() {\n    this.checkboxTypes = getClassMap(this.checkboxes.map(cb => 'types-' + cb.type));\n  }\n\n  @Watch('disabled')\n  @Watch('checkboxes')\n  handleDisabledChange() {\n    if (this.disabled === null) return;\n    this.checkboxes.map(cb => cb.disabled = this.disabled);\n  }\n\n  // private methods\n\n  private attachSlotObserver() {\n    const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private async handleSlotChange() {\n    forceUpdate(this.host);\n    this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    this.nativeCbs = await Promise.all(this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n      acc.push(cb.getInputElement())\n      return acc\n    }, []));\n\n    this.nativeCbs.forEach(cb => cb.addEventListener('invalid', this.handleInvalid));\n  }\n\n  private handleInvalid = (ev: Event) => {\n    this.invalid = true;\n\n    if (this.validateOn === 'submit') {\n      this.invalid = this.showErrorMsg = this.customValidate();\n    }\n    if (!!this.showInlineError) ev.preventDefault();\n\n    setTimeout(_ => this.showInlineValidation(ev), 20);\n  }\n\n  private showInlineValidation = (ev?: Event) => {\n    if (!this.nativeCbs || !this.nativeCbs.length) return;\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.showErrorMsg = false;\n    this.invalid = false;\n\n    this.nativeCbs.forEach((cb, i) => {\n      if (!cb.validity.valid) {\n        this.errorMessage = cb.validationMessage;\n        this.showErrorMsg = true;\n        this.invalid = true;\n        if (!!this.showInlineError) this.checkboxes[i].setFocus();\n      }\n    })\n    this.nanoValidate.emit({ isValid: !this.invalid, errorMessage: this.errorMessage, originalEvent: ev });\n  }\n\n  // stencil hooks\n\n  componentWillLoad() {\n    this.showInlineValidation = debounce(this.showInlineValidation, 20);\n    this.customValidate = this.customValidate.bind(this);\n  }\n\n  connectedCallback() {\n    this.attachSlotObserver();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  render() {\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n    const legendId = this.grpId + '-lbl';\n    const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';\n\n    return (\n      <Host { ...this.checkboxTypes } dir={isRtl ? 'rtl' : null}>\n        <fieldset\n          disabled={this.disabled}\n          class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n        >\n          <legend class='nanogroupcb__legend' id={legendId}>{this.legend}</legend>\n          <div class=\"nanogroupcb__cbs\" role=\"group\" aria-labelledby={legendId + ' ' + moreId}>\n            <slot />\n          </div>\n          {(this.showInlineError || this.hasHelperSlot) &&\n            <div class=\"nanogroupcb__more\" id={moreId}>\n              {(!!this.showInlineError ? <div class=\"nanogroupcb__error\">{this.errorMessage}</div> : '' )}\n              <div class=\"nanogroupcb__help\">\n                <slot name=\"helper\" />\n              </div>\n            </div>\n          }\n        </fieldset>\n      </Host>\n    );\n  }\n}\n\nlet grpIds = 0;\n"]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-cb5fb88f.system.js","./p-be88c3ef.system.js"],(function(e){"use strict";var t,o,n,i,r,s,a;return{setters:[function(e){t=e.r;o=e.c;n=e.h;i=e.e;r=e.g},function(e){s=e.c},function(e){a=e.g}],execute:function(){var c=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block}";var l=e("nano_accordion",function(){function e(e){t(this,e);this.nanoToggle=o(this,"nanoToggle",7)}e.prototype.onToggleHandler=function(e){var t=this;e.stopPropagation();var o=a(this.el,"nano-details")||this.el.querySelectorAll("nano-details");o.forEach((function(o,n){if(o!==e.target)o.open=false;else t.itemOpened=n}));this.nanoToggle.emit()};e.prototype.onClosedHandler=function(e){e.stopPropagation();this.itemOpened=null;this.nanoToggle.emit()};e.prototype.render=function(){var e;return n(i,{class:Object.assign(Object.assign({},s(this.color)),(e={},e["nano-color-"+this.itemOpened]=typeof this.itemOpened==="number",e))},n("slot",null))};e.prototype.connectedCallback=function(){};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());l.style=c}}}));
-//# sourceMappingURL=p-a482ae59.system.entry.js.map

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

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

package/dist/nano-components/p-a5c1742d.js

@@ -1,2 +0,0 @@
-const n=/^(\d{4})-(\d{2})-(\d{2})$/;var t;function r(n,t,r){var e=parseInt(r,10),a=parseInt(t,10),u=parseInt(n,10);if(Number.isInteger(u)&&Number.isInteger(a)&&Number.isInteger(e)&&a>0&&a<=12&&e>0&&e<=31&&u>0)return new Date(u,a-1,e)}function e(t){if(!t)return;const e=t.match(n);return e?r(e[1],e[2],e[3]):void 0}function a(n){if(!n)return"";var t=n.getDate().toString(10),r=(n.getMonth()+1).toString(10),e=n.getFullYear().toString(10);return n.getDate()<10&&(t=`0${t}`),n.getMonth()<9&&(r=`0${r}`),`${e}-${r}-${t}`}function u(n,t){var r=new Date(n);return r.setDate(r.getDate()+t),r}function s(n,r=t.Monday){var e=new Date(n),a=e.getDay(),u=(a<r?7:0)+a-r;return e.setDate(e.getDate()-u),e}function o(n,r=t.Monday){var e=new Date(n),a=e.getDay(),u=6+(a<r?-7:0)-(a-r);return e.setDate(e.getDate()+u),e}function c(n){return new Date(n.getFullYear(),n.getMonth(),1)}function i(n){return new Date(n.getFullYear(),n.getMonth()+1,0)}function f(n,t){const r=new Date(n);return r.setMonth(t),r}function $(n,t){const r=new Date(n);return r.setFullYear(t),r}function d(n,t,r){return D(n,t,r)===n}function D(n,t,r){const e=n.getTime();return t&&t instanceof Date&&e<t.getTime()?t:r&&r instanceof Date&&e>r.getTime()?r:n}function w(){return Math.random().toString(16).slice(-4)}function v(n){return`${n}-${w()}${w()}-${w()}-${w()}-${w()}-${w()}${w()}${w()}`}!function(n){n[n.Sunday=0]="Sunday",n[n.Monday=1]="Monday",n[n.Tuesday=2]="Tuesday",n[n.Wednesday=3]="Wednesday",n[n.Thursday=4]="Thursday",n[n.Friday=5]="Friday",n[n.Saturday=6]="Saturday"}(t||(t={}));export{t as D,a,v as b,r as c,u as d,o as e,f,c as g,i as h,d as i,D as j,$ as k,e as p,s}
-//# sourceMappingURL=p-a5c1742d.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/date-utils.ts"],"names":["ISO_DATE_FORMAT","DaysOfWeek","createDate","year","month","day","dayInt","parseInt","monthInt","yearInt","Number","isInteger","Date","parseISODate","value","matches","match","printISODate","date","d","getDate","toString","m","getMonth","y","getFullYear","addDays","days","setDate","startOfWeek","firstDayOfWeek","Monday","getDay","diff","endOfWeek","startOfMonth","endOfMonth","setMonth","setYear","setFullYear","inRange","min","max","clamp","time","getTime","chr4","Math","random","slice","createIdentifier","prefix"],"mappings":"AAAA,MAAMA,EAAkB,gCAEZC,WAUIC,EAAWC,EAAcC,EAAeC,GACtD,IAAIC,EAASC,SAASF,EAAK,IACvBG,EAAWD,SAASH,EAAO,IAC3BK,EAAUF,SAASJ,EAAM,IAY7B,GATEO,OAAOC,UAAUF,IACjBC,OAAOC,UAAUH,IACjBE,OAAOC,UAAUL,IACjBE,EAAW,GACXA,GAAY,IACZF,EAAS,GACTA,GAAU,IACVG,EAAU,EAGV,OAAO,IAAIG,KAAKH,EAASD,EAAW,EAAGF,YAO3BO,EAAaC,GAC3B,IAAKA,EACH,OAGF,MAAMC,EAAUD,EAAME,MAAMhB,GAC5B,OAAIe,EACKb,EAAWa,EAAQ,GAAIA,EAAQ,GAAIA,EAAQ,SADpD,WAScE,EAAaC,GAC3B,IAAKA,EACH,MAAO,GAGT,IAAIC,EAAID,EAAKE,UAAUC,SAAS,IAC5BC,GAAKJ,EAAKK,WAAa,GAAGF,SAAS,IACnCG,EAAIN,EAAKO,cAAcJ,SAAS,IAYpC,OATIH,EAAKE,UAAY,KACnBD,EAAI,IAAIA,KAIND,EAAKK,WAAa,IACpBD,EAAI,IAAIA,KAGH,GAAGE,KAAKF,KAAKH,aAcNO,EAAQR,EAAYS,GAClC,IAAIR,EAAI,IAAIP,KAAKM,GAEjB,OADAC,EAAES,QAAQT,EAAEC,UAAYO,GACjBR,WAeOU,EAAYX,EAAYY,EAA6B7B,EAAW8B,QAC9E,IAAIZ,EAAI,IAAIP,KAAKM,GACbb,EAAMc,EAAEa,SACRC,GAAQ5B,EAAMyB,EAAiB,EAAI,GAAKzB,EAAMyB,EAGlD,OADAX,EAAES,QAAQT,EAAEC,UAAYa,GACjBd,WAGOe,EAAUhB,EAAYY,EAA6B7B,EAAW8B,QAC5E,IAAIZ,EAAI,IAAIP,KAAKM,GACbb,EAAMc,EAAEa,SACRC,EAAyC,GAAjC5B,EAAMyB,GAAkB,EAAI,IAAUzB,EAAMyB,GAGxD,OADAX,EAAES,QAAQT,EAAEC,UAAYa,GACjBd,WAGOgB,EAAajB,GAC3B,OAAO,IAAIN,KAAKM,EAAKO,cAAeP,EAAKK,WAAY,YAGvCa,EAAWlB,GACzB,OAAO,IAAIN,KAAKM,EAAKO,cAAeP,EAAKK,WAAa,EAAG,YAG3Cc,EAASnB,EAAYd,GACnC,MAAMe,EAAI,IAAIP,KAAKM,GAEnB,OADAC,EAAEkB,SAASjC,GACJe,WAGOmB,EAAQpB,EAAYf,GAClC,MAAMgB,EAAI,IAAIP,KAAKM,GAEnB,OADAC,EAAEoB,YAAYpC,GACPgB,WAMOqB,EAAQtB,EAAYuB,EAAYC,GAC9C,OAAOC,EAAMzB,EAAMuB,EAAKC,KAASxB,WAMnByB,EAAMzB,EAAYuB,EAAYC,GAC5C,MAAME,EAAO1B,EAAK2B,UAElB,OAAIJ,GAAOA,aAAe7B,MAAQgC,EAAOH,EAAII,UACpCJ,EAELC,GAAOA,aAAe9B,MAAQgC,EAAOF,EAAIG,UACpCH,EAEFxB,WAqCO4B,IACd,OAAOC,KAAKC,SACT3B,SAAS,IACT4B,OAAO,YAOIC,EAAiBC,GAC/B,MAAO,GAAGA,KAAUL,MAASA,OAAUA,OAAUA,OAAUA,OAAUA,MAASA,MAASA,OA5MzF,SAAY7C,GACVA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,QAAA,GAAA,UACAA,EAAAA,EAAA,UAAA,GAAA,YACAA,EAAAA,EAAA,SAAA,GAAA,WACAA,EAAAA,EAAA,OAAA,GAAA,SACAA,EAAAA,EAAA,SAAA,GAAA,WAPF,CAAYA,IAAAA,EAAU","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  if (matches) {\n    return createDate(matches[1], matches[2], matches[3])\n  }\n}\n\n/**\n * print date in format YYYY-MM-DD\n * @param date\n */\nexport function printISODate(date: Date): string {\n  if (!date) {\n    return \"\"\n  }\n\n  var d = date.getDate().toString(10)\n  var m = (date.getMonth() + 1).toString(10)\n  var y = date.getFullYear().toString(10)\n\n  // days are not zero-indexed, so pad if less than 10\n  if (date.getDate() < 10) {\n    d = `0${d}`\n  }\n\n  // months *are* zero-indexed, pad if less than 9!\n  if (date.getMonth() < 9) {\n    m = `0${m}`\n  }\n\n  return `${y}-${m}-${d}`\n}\n\n/**\n * Compare if two dates are equal in terms of day, month, and year\n */\nexport function isEqual(a: Date, b: Date): boolean {\n  if (a == null || b == null) {\n    return false\n  }\n\n  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()\n}\n\nexport function addDays(date: Date, days: number): Date {\n  var d = new Date(date)\n  d.setDate(d.getDate() + days)\n  return d\n}\n\nexport function addMonths(date: Date, months: number): Date {\n  const d = new Date(date)\n  d.setMonth(date.getMonth() + months)\n  return d\n}\n\nexport function addYears(date: Date, years: number): Date {\n  const d = new Date(date)\n  d.setFullYear(date.getFullYear() + years)\n  return d\n}\n\nexport function startOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\n  var d = new Date(date)\n  var day = d.getDay()\n  var diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek\n\n  d.setDate(d.getDate() - diff)\n  return d\n}\n\nexport function endOfWeek(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date {\n  var d = new Date(date)\n  var day = d.getDay()\n  var diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek)\n\n  d.setDate(d.getDate() + diff)\n  return d\n}\n\nexport function startOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth(), 1)\n}\n\nexport function endOfMonth(date: Date): Date {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0)\n}\n\nexport function setMonth(date: Date, month: number): Date {\n  const d = new Date(date)\n  d.setMonth(month)\n  return d\n}\n\nexport function setYear(date: Date, year: number): Date {\n  const d = new Date(date)\n  d.setFullYear(year)\n  return d\n}\n\n/**\n * Check if date is within a min and max\n */\nexport function inRange(date: Date, min?: Date, max?: Date): boolean {\n  return clamp(date, min, max) === date\n}\n\n/**\n * Ensures date is within range, returns min or max if out of bounds\n */\nexport function clamp(date: Date, min?: Date, max?: Date): Date {\n  const time = date.getTime()\n\n  if (min && min instanceof Date && time < min.getTime()) {\n    return min\n  }\n  if (max && max instanceof Date && time > max.getTime()) {\n    return max\n  }\n  return date\n}\n\n/**\n * given start and end date, return an (inclusive) array of all dates in between\n * @param start\n * @param end\n */\nfunction getDaysInRange(start: Date, end: Date): Date[] {\n  const days: Date[] = []\n  let current = start\n\n  while (!isEqual(current, end)) {\n    days.push(current)\n    current = addDays(current, 1)\n  }\n\n  days.push(current)\n\n  return days\n}\n\n/**\n * given a date, return an array of dates from a calendar perspective\n * @param date\n * @param firstDayOfWeek\n */\nexport function getViewOfMonth(date: Date, firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday): Date[] {\n  const start = startOfWeek(startOfMonth(date), firstDayOfWeek)\n  const end = endOfWeek(endOfMonth(date), firstDayOfWeek)\n\n  return getDaysInRange(start, end)\n}\n\n/**\n * Form random hash\n */\nexport function chr4() {\n  return Math.random()\n    .toString(16)\n    .slice(-4)\n}\n\n/**\n * Create random identifier with a prefix\n * @param prefix\n */\nexport function createIdentifier(prefix) {\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`\n}\n"]}

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

@@ -1,2 +0,0 @@
-System.register(["./p-3b21dfce.system.js","./p-be88c3ef.system.js"],(function(t){"use strict";var e,i,o,n,r,a;return{setters:[function(t){e=t.r;i=t.f;o=t.h;n=t.e;r=t.g},function(t){a=t.c}],execute:function(){var s=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host(.legacy) ::slotted(*),:host(.legacy) *{--global-nav-height:61px;--padding-top:13px;--padding-end:13px;--padding-bottom:13px;--padding-start:13px;--secondary-padding-end:13px;--secondary-padding-bottom:13px;--secondary-padding-start:13px;--secondary-padding-top:61px;--icon-size:19px;--font-size:11px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, .8);--bg-color-selected:#274048;--bg-color-open:#274048;--bg-color-focus:rgba(28, 62, 72, .8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72)}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:61px;--bg-color:#001a21;--bg-color-hover:rgba(28, 62, 72, .8);--bg-color-selected:#274048;--bg-color-focus:rgba(28, 62, 72, .8);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28, 62, 72);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;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host *,:host *:before,:host *:after{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-top:var(--global-nav-height)}@supports ((position: -webkit-sticky) or (position: sticky)){:host(.has-global-nav) .content-wrap{margin-top:calc(var(--global-nav-height) * -1)}}.container{right:auto;-webkit-box-flex:0;-ms-flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));flex:0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;width:calc((var(--padding-end, 1em) * 2) + var(--icon-size));height:100%}:host(.open) .container{width:auto}:host(:not(.loading)) .container{-webkit-transition:width 0.3s ease;transition:width 0.3s ease}.content-wrap{left:0;top:0;width:inherit;max-width:inherit;background:var(--bg-color);color:#fff;position:fixed;position:-webkit-sticky;position:sticky;font-size:var(--icon-size);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-height:calc(100vh - 61px);min-height:calc((var(--vh, 1vh) * 100) - 61px);z-index:1}:host([dir=rtl]) .content-wrap{right:0;left:auto}.content{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden;background:var(--bg-color);-webkit-box-flex:1;-ms-flex:1;flex:1}.content::after{content:"";position:absolute;top:0;left:0;right:0;background:var(--bg-color);z-index:-1;height:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin:var(--padding-top) auto var(--padding-bottom) calc(var(--padding-start) / 2);border-radius:4px;padding:6px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;width:30px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);-webkit-transition:0.2s -webkit-transform ease-in-out;transition:0.2s -webkit-transform ease-in-out;transition:0.2s transform ease-in-out;transition:0.2s transform ease-in-out, 0.2s -webkit-transform ease-in-out;-webkit-transform:translateZ(0) rotate(0deg);transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{-webkit-transform:translateZ(0) rotate(180deg);transform:translateZ(0) rotate(180deg)}.foot{margin-top:auto}.measure-ele{height:1px}';var l=!!document.head.attachShadow;var h=t("nano_menu_drawer",function(){function t(t){var i=this;e(this,t);this.children=[];this.currHeight=window.innerHeight;this.reset=false;this.widthOk=true;this.heightOk=true;this.isLoading=true;this.hide=false;this.open=true;this.saveState=true;this.hideWidth=576;this.hideHeight=true;this.onWindowResize=function(){if(window.innerWidth>i.hideWidth)i.widthOk=true;else i.widthOk=false;var t=window.innerHeight*.01;i.el.style.setProperty("--vh",t+"px");if(window.innerHeight>i.currHeight&&i.widthOk&&!i.heightOk){i.moveItemsToDrawer()}i.currHeight=window.innerHeight};this.toggle=function(t){t.preventDefault();i.open=!i.open};this.onToggleKeyDown=function(t){switch(t.key){case"Enter":case" ":i.open=!i.open;break}}}t.prototype.cancelNavItemEvents=function(t){if(!t.detail.secondaryMenu)return;t.stopPropagation()};t.prototype.openChange=function(){var t=this;if(this.saveState)localStorage.setItem("nanoMenuDrawerOpen",this.open.toString());if(this.containerDiv){if(this.open)i((function(){return t.containerDiv.style.width=t.contentDiv.scrollWidth+"px"}));else i((function(){return t.containerDiv.style.width=null}))}};t.prototype.widthChange=function(){if(this.widthOk)this.moveItemsToDrawer();else this.moveItemsToGlobalNav()};t.prototype.hideHeightChange=function(){if(this.hideHeight&&!this.io)this.attachIO();else if(!this.hideHeight&&this.io){this.io.disconnect();this.io=undefined}};t.prototype.moveItemsToGlobalNav=function(){var t=this;var e=this.el.querySelectorAll("nano-nav-item");e.forEach((function(e){t.children.push({slot:e.getAttribute("slot"),element:e});e.setAttribute("slot","overflow");e.classList.add("nano-global-nav-menu");t.globalNav.appendChild(e)}));this.hide=true};t.prototype.moveItemsToDrawer=function(){var t=this;if(!this.children||!this.children.length)return;this.children.forEach((function(e){e.element.removeAttribute("slot");e.element.classList.remove("nano-global-nav-menu");if(e.slot&&e.slot.length)e.element.setAttribute("slot",e.slot);t.el.appendChild(e.element)}));this.children=[];this.hide=false;if(!this.io)this.attachIO()};t.prototype.attachIO=function(){var t=this;if(!this.hideHeight)return;var e=this.io=new window.IntersectionObserver((function(e){t.heightOk=e[0].intersectionRatio!==0;if(!t.heightOk){t.moveItemsToGlobalNav();t.io.disconnect();t.io=undefined}}),{threshold:1});e.observe(this.measureEle)};t.prototype.componentWillLoad=function(){var t=this;this.globalNav=a("nano-global-nav",this.el);this.globalNav.addEventListener("nanoIsReady",(function(){setTimeout((function(){t.attachIO();t.openChange();t.onWindowResize();t.isLoading=false}),500)}));this.widthOk=window.innerWidth>this.hideWidth;this.currHeight=window.innerHeight;if(this.saveState){var e=localStorage.getItem("nanoMenuDrawerOpen");this.open=e?e==="true":this.open}};t.prototype.componentDidLoad=function(){{window.addEventListener("resize",this.onWindowResize)}};t.prototype.disconnectedCallback=function(){window.removeEventListener("resize",this.debounceResize);if(this.io){this.io.disconnect();this.io=null}};t.prototype.render=function(){var t=this;return o(n,{class:{open:this.open,hide:this.hide,legacy:!l,loading:this.isLoading,"has-global-nav":!!this.globalNav},dir:this.el.ownerDocument.dir==="rtl"?"rtl":null},o("div",{ref:function(e){return t.containerDiv=e},class:"container"},o("div",{class:"content-wrap"},o("nav",{ref:function(e){return t.contentDiv=e},class:"content"},o("button",{onMouseDown:this.toggle,onKeyDown:this.onToggleKeyDown,class:"collapse-btn"},o("nano-icon",{name:"light/arrow-alt-to-right","aria-label":"collapse / expand"})),o("slot",null),o("div",{class:"foot"},o("div",{class:"measure-ele",ref:function(e){return t.measureEle=e}}),o("slot",{name:"foot"}))))))};Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openChange"],widthOk:["widthChange"],hideHeight:["hideHeightChange"]}},enumerable:false,configurable:true});return t}());h.style=s}}}));
-//# sourceMappingURL=p-a686a455.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"names":["menuDrawerCss","CANSHADOW","document","head","attachShadow","MenuDrawer","exports","class_1","hostRef","_this","this","children","currHeight","window","innerHeight","reset","widthOk","heightOk","isLoading","hide","open","saveState","hideWidth","hideHeight","onWindowResize","innerWidth","vh","el","style","setProperty","moveItemsToDrawer","toggle","e","preventDefault","onToggleKeyDown","ev","key","prototype","cancelNavItemEvents","detail","secondaryMenu","stopPropagation","openChange","localStorage","setItem","toString","containerDiv","writeTask","width","contentDiv","scrollWidth","widthChange","moveItemsToGlobalNav","hideHeightChange","io","attachIO","disconnect","undefined","currNavItems","querySelectorAll","forEach","element","push","slot","getAttribute","setAttribute","classList","add","globalNav","appendChild","length","child","removeAttribute","remove","IntersectionObserver","data","intersectionRatio","threshold","observe","measureEle","componentWillLoad","closestElement","addEventListener","setTimeout","localState","getItem","componentDidLoad","disconnectedCallback","removeEventListener","debounceResize","render","h","Host","class","legacy","loading","has-global-nav","dir","ownerDocument","ref","div","onMouseDown","onKeyDown","name","aria-label"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n\n:host(.legacy) {\n\n  ::slotted(*),\n  * {\n    --global-nav-height: 61px;\n\n    --padding-top: 13px;\n    --padding-end: 13px;\n    --padding-bottom: 13px;\n    --padding-start: 13px;\n\n    --secondary-padding-end: 13px;\n    --secondary-padding-bottom: 13px;\n    --secondary-padding-start: 13px;\n    --secondary-padding-top: 61px;\n\n    --icon-size: 19px;\n    --font-size: 11px;\n\n    --bg-color: #001a21;\n    --bg-color-hover: rgba(28, 62, 72, .8);\n    --bg-color-selected: #274048;\n    --bg-color-open: #274048;\n    --bg-color-focus: rgba(28, 62, 72, .8);\n    --focus-outline: none;\n\n    --content-color: #{$color-white};\n    --secondary-bg-color: rgb(28, 62, 72);\n  }\n}\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 61px;\n\n  --bg-color: #001a21;\n  --bg-color-hover: rgba(28, 62, 72, .8);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgba(28, 62, 72, .8);\n  --focus-outline: none;\n\n  --content-color: #{$color-white};\n  --secondary-bg-color: rgb(28, 62, 72);\n\n  @include text-inherit();\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n\n  .content-wrap {\n    padding-top: var(--global-nav-height);\n\n    @at-root {\n      @supports ((position: sticky)) {\n        & {\n          margin-top: calc(var(--global-nav-height) * -1);\n        }\n      }\n    }\n  }\n}\n\n.container {\n  right: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  width: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  height: 100%;\n}\n\n:host(.open) {\n  .container {\n    width: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: width .3s ease;\n  }\n}\n\n.content-wrap {\n  left: 0;\n  top: 0;\n  width: inherit;\n  max-width: inherit;\n  background: var(--bg-color);\n  color: $color-white;\n  position: fixed;\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-height: calc(100vh - 61px);\n  min-height: calc((var(--vh, 1vh) * 100) - 61px);\n  z-index: 1;\n\n  @include rtl-host {\n    right: 0;\n    left: auto;\n  }\n}\n\n.content {\n  width: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    height: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin: var(--padding-top) auto var(--padding-bottom) calc(var(--padding-start) / 2);\n  border-radius: 4px;\n  padding: 6px 5px;\n  display: flex;\n  align-content: center;\n  width: 30px;\n  flex: 0 0 auto;\n\n  nano-icon {\n    font-size: var(--icon-size);\n    transition: .2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-top: auto;\n}\n\n.measure-ele {\n  height: 1px;\n}\n","import {\n  Component, h, Host, Prop, writeTask, State, Element, Watch, Listen, Build\n} from '@stencil/core';\nimport { closestElement } from '../../utils/utils';\nimport { NavItemEventDetail } from '../../interface';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed. \n * Shows menu item logos only on minimised, expands to show entire menu item. \n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens. \n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private debounceResize: () => {};\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string, element: HTMLNanoNavItemElement }> = [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop() open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off \n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState) localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open) writeTask(() => this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n      else writeTask(() => this.containerDiv.style.width = null)\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    let currNavItems = this.el.querySelectorAll('nano-nav-item');\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach(element => {\n      this.children.push({ slot: element.getAttribute('slot'), element: element });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element)\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach(child => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu')\n      if (child.slot && child.slot.length) child.element.setAttribute('slot', child.slot)\n      this.el.appendChild(child.element)\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    let vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (window.innerHeight > this.currHeight && this.widthOk && !this.heightOk) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  }\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  }\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  }\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = this.io = new (window as any).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav()\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    );\n    io.observe(this.measureEle);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement('nano-global-nav', this.el) as HTMLNanoGlobalNavElement;\n    this.globalNav.addEventListener('nanoIsReady', () => {\n      setTimeout(() => {\n        this.attachIO();\n        this.openChange();\n        this.onWindowResize();\n        this.isLoading = false;\n      }, 500)\n    })\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      let localState = localStorage.getItem('nanoMenuDrawerOpen')\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.debounceResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'open': this.open,\n          'hide': this.hide,\n          'legacy': !CANSHADOW,\n          'loading': this.isLoading,\n          'has-global-nav': !!this.globalNav\n        }}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={div => this.containerDiv = div} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={div => this.contentDiv = div} class=\"content\">\n              <button onMouseDown={this.toggle} onKeyDown={this.onToggleKeyDown} class=\"collapse-btn\">\n                <nano-icon name=\"light/arrow-alt-to-right\" aria-label=\"collapse / expand\"></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div class=\"measure-ele\" ref={div => this.measureEle = div}></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}"]}

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

@@ -1,2 +0,0 @@
-var __spreadArray=this&&this.__spreadArray||function(r,e){for(var t=0,n=e.length,u=r.length;t<n;t++,u++)r[u]=e[t];return r};System.register([],(function(r){"use strict";return{execute:function(){r({g:e,h:t});function e(r){var e=r.assignedNodes({flatten:true});var t="";__spreadArray([],e).map((function(r){if(r.nodeType===Node.TEXT_NODE){t+=r.textContent}}));return t}function t(r,e){if(e){return r.querySelector('[slot="'+e+'"]')!==null}return __spreadArray([],Array.from(r.childNodes)).some((function(r){if(r.nodeType===r.TEXT_NODE&&r.textContent.trim()!==""){return true}if(r.nodeType===r.ELEMENT_NODE){var e=r;if(!e.hasAttribute("slot")){return true}}return false}))}}}}));
-//# sourceMappingURL=p-a6dfe69a.system.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/utils/slot.ts"],"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","__spreadArray","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","trim","ELEMENT_NODE","el_1","hasAttribute"],"mappings":"yNAyBgBA,EAAeC,GAC7B,IAAMC,EAAQD,EAAKE,cAAc,CAAEC,QAAS,OAC5C,IAAIC,EAAO,GAEXC,cAAA,GAAIJ,GAAOK,KAAI,SAAAC,GACb,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCN,GAAQG,EAAKI,gBAIjB,OAAOP,WAOOQ,EAAQC,EAAiBC,GAEvC,GAAIA,EAAM,CACR,OAAOD,EAAGE,cAAc,UAAUD,EAAI,QAAU,KAIlD,OAAOT,cAAA,GAAIW,MAAMC,KAAKJ,EAAGK,aAAaC,MAAK,SAAAZ,GACzC,GAAIA,EAAKC,WAAaD,EAAKG,WAAaH,EAAKI,YAAYS,SAAW,GAAI,CACtE,OAAO,KAGT,GAAIb,EAAKC,WAAaD,EAAKc,aAAc,CACvC,IAAMC,EAAKf,EACX,IAAKe,EAAGC,aAAa,QAAS,CAC5B,OAAO,MAIX,OAAO","sourcesContent":["/**\n * Given a slot, this function iterates over all of its assigned elements and text nodes and returns the concatenated\n * HTML as a string. This is useful because we can't use slot.innerHTML as an alternative.\n */\nexport function getInnerHTML(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let html = '';\n\n  [...nodes].map(node => {\n    if (node.nodeType === Node.ELEMENT_NODE) {\n      html += (node as HTMLElement).outerHTML;\n    }\n\n    if (node.nodeType === Node.TEXT_NODE) {\n      html += node.textContent;\n    }\n  });\n\n  return html;\n}\n\n/**\n * Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n * string. This is useful because we can't use slot.textContent as an alternative.\n */\nexport function getTextContent(slot: HTMLSlotElement): string {\n  const nodes = slot.assignedNodes({ flatten: true });\n  let text = '';\n\n  [...nodes].map(node => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      text += node.textContent;\n    }\n  });\n\n  return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return [...Array.from(el.childNodes)].some(node => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute('slot')) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n"]}

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

@@ -1,2 +0,0 @@
-import{h as t,r as e,c as a,e as i,g as s}from"./p-7a6bc3c5.js";import{b as o,D as n,i as d,p as r,d as h,s as l,e as c,f as u,g as p,h as b,j as w,k as x,a as f}from"./p-a5c1742d.js";import{c as _}from"./p-88d68319.js";import{P as g}from"./p-00c6bee1.js";import{t as v}from"./p-190e2d91.js";import{a as m}from"./p-25387b50.js";var y;function k(t,e){return null!=t&&null!=e&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()&&t.getDate()===e.getDate()}function D(t,e){var a=new Date(t);return a.setDate(a.getDate()+e),a}function z(t,e,a){return function(t,e,a){const i=t.getTime();return e&&e instanceof Date&&i<e.getTime()?e:a&&a instanceof Date&&i>a.getTime()?a:t}(t,e,a)===t}!function(t){t[t.Sunday=0]="Sunday",t[t.Monday=1]="Monday",t[t.Tuesday=2]="Tuesday",t[t.Wednesday=3]="Wednesday",t[t.Thursday=4]="Thursday",t[t.Friday=5]="Friday",t[t.Saturday=6]="Saturday"}(y||(y={}));const S=({focusedDay:e,today:a,day:i,onDaySelect:s,onKeyboardNavigation:o,focusedDayRef:n,inRange:d,disabled:r,isSelected:h})=>{const l=k(i,a),c=k(i,e),u=i.getMonth()!==e.getMonth()||r,p=!d;return t("button",{class:{"duet-date__day":!0,"is-outside":p,"is-disabled":u,"is-today":l},tabIndex:c?0:-1,onClick:function(t){s(t,i)},onKeyDown:o,disabled:p,type:"button","aria-pressed":h?"true":"false",ref:t=>{c&&t&&n&&n(t)}},t("span",{"aria-hidden":"true"},i.getDate()),t("span",{class:"duet-date__vhidden"},i.toLocaleDateString(void 0,{day:"numeric",month:"long"})))},C=({selectedDate:e,focusedDate:a,labelledById:i,localization:s,firstDayOfWeek:o,min:n,max:d,onDateSelect:r,onKeyboardNavigation:h,focusedDayRef:l,onMouseDown:c,onFocusIn:u,isDateDisabled:p})=>{const b=new Date,w=function(t,e=y.Monday){return function(t,e){const a=[];let i=t;for(;!k(i,e);)a.push(i),i=D(i,1);return a.push(i),a}(function(t,e=y.Monday){var a=new Date(t),i=a.getDay(),s=(i<e?7:0)+i-e;return a.setDate(a.getDate()-s),a}(function(t){return new Date(t.getFullYear(),t.getMonth(),1)}(t),e),function(t,e=y.Monday){var a=new Date(t),i=a.getDay(),s=6+(i<e?-7:0)-(i-e);return a.setDate(a.getDate()+s),a}(function(t){return new Date(t.getFullYear(),t.getMonth()+1,0)}(t),e))}(a,o);return t("table",{class:"duet-date__table",role:"grid","aria-labelledby":i,onFocusin:u,onMouseDown:c},t("thead",null,t("tr",null,(f=o,_=e=>t("th",{class:"duet-date__table-header",scope:"col"},t("span",{"aria-hidden":"true"},e.substr(0,2)),t("span",{class:"duet-date__vhidden"},e)),(x=s.dayNames).map(((t,e)=>_(x[(e+f)%x.length])))))),t("tbody",null,function(t){const e=[];for(let a=0;a<t.length;a+=7)e.push(t.slice(a,a+7));return e}(w).map((i=>t("tr",{class:"duet-date__row"},i.map((i=>t("td",{class:"duet-date__cell",role:"gridcell","aria-selected":k(i,e)?"true":void 0},t(S,{day:i,today:b,focusedDay:a,inRange:z(i,n,d),onDaySelect:r,onKeyboardNavigation:h,focusedDayRef:l,disabled:p(i),isSelected:k(i,e)})))))))));var x,f,_},M={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"]},A=class{constructor(t){e(this,t),this.nanoDatePicked=a(this,"nanoDatePicked",7),this.monthSelectId=o("NanoDateMonth"),this.yearSelectId=o("NanoDateYear"),this.dialogLabelId=o("NanoDateLabel"),this.initialTouchX=null,this.initialTouchY=null,this.activeFocus=!1,this.focusedDay=new Date,this.selectedDate="",this.min="",this.max="",this.firstDayOfWeek=n.Monday,this.localization=M,this.isDateDisabled=()=>!1,this.isModal=!1,this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1},this.handleTouchStart=t=>{const e=t.changedTouches[0];this.initialTouchX=e.pageX,this.initialTouchY=e.pageY},this.handleTouchMove=t=>{t.preventDefault()},this.handleTouchEnd=t=>{const e=t.changedTouches[0],a=e.pageX-this.initialTouchX,i=e.pageY-this.initialTouchY;Math.abs(a)>=70&&Math.abs(i)<=70&&this.addMonths(a<0?1:-1),this.initialTouchY=null,this.initialTouchX=null},this.handleNextMonthClick=t=>{t.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=t=>{t.preventDefault(),this.addMonths(-1)},this.handleKeyboardNavigation=t=>{if("Tab"===t.key&&!t.shiftKey&&this.isModal)return t.preventDefault(),void(this.firstFocusEle||this.firstFocusableElement).focus();var e=!0;switch(t.key){case"ArrowRight":this.addDays(1);break;case"ArrowLeft":this.addDays(-1);break;case"ArrowDown":this.addDays(7);break;case"ArrowUp":this.addDays(-7);break;case"PageUp":t.shiftKey?this.addYears(-1):this.addMonths(-1);break;case"PageDown":t.shiftKey?this.addYears(1):this.addMonths(1);break;case"Home":this.startOfWeek();break;case"End":this.endOfWeek();break;default:e=!1}e&&(t.preventDefault(),this.enableActiveFocus())},this.handleDaySelect=(t,e)=>{const a=!this.isDateDisabled(e);d(e,r(this.min),r(this.max))&&a&&(e.getMonth()===this.focusedDay.getMonth()?this.setValue(e):this.setFocusedDay(e))},this.handleMonthSelect=t=>{this.setMonth(parseInt(t.target.value,10))},this.handleYearSelect=t=>{this.setYear(parseInt(t.target.value,10))},this.processFocusedDayNode=t=>{this.focusedDayNode=t,this.activeFocus&&setTimeout((()=>t.focus()),0)}}async setFocus(t=!1){this.setFocusedDay(r(this.selectedDate)||new Date),t?setTimeout((()=>this.focusedDayNode.focus()),20):(clearTimeout(this.focusTimeoutId),this.focusTimeoutId=setTimeout((()=>this.monthSelectNode.focus()),20))}handleSelectedDateChange(){this.setFocus(!0)}addDays(t){this.setFocusedDay(h(this.focusedDay,t))}addMonths(t){this.setMonth(this.focusedDay.getMonth()+t)}addYears(t){this.setYear(this.focusedDay.getFullYear()+t)}startOfWeek(){this.setFocusedDay(l(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(c(this.focusedDay,this.firstDayOfWeek))}setMonth(t){const e=u(p(this.focusedDay),t),a=b(e),i=u(this.focusedDay,t);this.setFocusedDay(w(i,e,a))}setYear(t){const e=x(p(this.focusedDay),t),a=b(e),i=x(this.focusedDay,t);this.setFocusedDay(w(i,e,a))}setFocusedDay(t){this.focusedDay=w(t,r(this.min),r(this.max))}setValue(t){this.selectedDate=f(t),this.nanoDatePicked.emit({value:this.selectedDate,valueAsDate:t})}componentWillLoad(){this.handleSelectedDateChange()}render(){const e=r(this.selectedDate),a=(e||this.focusedDay).getFullYear(),s=this.focusedDay.getMonth(),o=this.focusedDay.getFullYear(),n=r(this.min),h=r(this.max),l=null!=n&&n.getMonth()===s&&n.getFullYear()===o,c=null!=h&&h.getMonth()===s&&h.getFullYear()===o;let u=a-10,w=a+10;return n&&(u=n.getFullYear()),h&&(w=h.getFullYear()),t(i,{class:Object.assign({},_(this.color))},t("div",{class:"duet-date"},t("div",{class:{"duet-date__dialog":!0,"is-active":!0},onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"duet-date__dialog-content"},t("div",{class:"duet-date__vhidden duet-date__instructions","aria-live":"polite"},this.localization.keyboardInstruction),t("div",{class:"duet-date__header",onFocusin:this.disableActiveFocus},t("div",null,t("h2",{id:this.dialogLabelId,class:"duet-date__vhidden","aria-live":"polite"},this.localization.monthNames[s]," ",this.focusedDay.getFullYear()),t("label",{htmlFor:this.monthSelectId,class:"duet-date__vhidden"},this.localization.monthSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.monthSelectId,class:"duet-date__select--month",ref:t=>this.firstFocusableElement=this.monthSelectNode=t,onChange:this.handleMonthSelect},this.localization.monthNames.map(((e,a)=>t("option",{key:e,value:a,selected:a===s,disabled:!d(new Date(o,a,1),n?p(n):null,h?b(h):null)},e)))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.localization.monthNamesShort[s]),t("nano-icon",{name:"light/chevron-down"}))),t("label",{htmlFor:this.yearSelectId,class:"duet-date__vhidden"},this.localization.yearSelectLabel),t("div",{class:"duet-date__select"},t("select",{id:this.yearSelectId,class:"duet-date__select--year",onChange:this.handleYearSelect},function(t,e){for(var a=[],i=t;i<=e;i++)a.push(i);return a}(u,w).map((e=>t("option",{key:e,selected:e===o},e)))),t("div",{class:"duet-date__select-label","aria-hidden":"true"},t("span",null,this.focusedDay.getFullYear()),t("nano-icon",{name:"light/chevron-down"})))),t("div",{class:"duet-date__nav"},t("button",{class:"duet-date__prev",onClick:this.handlePreviousMonthClick,disabled:l,type:"button"},t("nano-icon",{name:"light/chevron-left"}),t("span",{class:"duet-date__vhidden"},this.localization.prevMonthLabel)),t("button",{class:"duet-date__next",onClick:this.handleNextMonthClick,disabled:c,type:"button"},t("nano-icon",{name:"light/chevron-right"}),t("span",{class:"duet-date__vhidden"},this.localization.nextMonthLabel)))),t("div",null,t(C,{selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:n,max:h,isDateDisabled:this.isDateDisabled}))))))}get host(){return s(this)}static get watchers(){return{selectedDate:["handleSelectedDateChange"]}}};A.style=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--active-text-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--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}';const T=class{constructor(t){e(this,t),this.nanoShow=a(this,"nanoShow",7),this.nanoAfterShow=a(this,"nanoAfterShow",7),this.nanoHide=a(this,"nanoHide",7),this.nanoAfterHide=a(this,"nanoAfterHide",7),this.dropdownId="dropdown-"+O++,this.labelId=this.dropdownId+"-title",this.ignoreOpenWatcher=!1,this.menuFocused=!1,this.autoOpen=!0,this.open=!1,this.placement="bottom-start",this.closeOnSelect=!0,this.distance=2,this.skidding=0,this.hoist=!1,this.dialogTitle=null,this.handleTriggerKeyDown=t=>{!this.open&&["ArrowDown","ArrowUp"," "].includes(t.key)&&(this.show(),t.preventDefault(),t.stopPropagation())},this.handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()},this.togglePanel=()=>{this.autoOpen&&(this.open?this.hide():this.show())}}handleOpenChange(){this.ignoreOpenWatcher||(this.open?this.show():this.hide(),this.updateAccessibleTrigger())}handlePopoverOptionsChange(){this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}menuFocus(t){let e=t.target;e&&e.tagName&&"nano-menu"===e.tagName.toLowerCase()&&(this.menuFocused=!0)}secondaryOpen(t){t.detail.secondaryMenu&&(t.stopPropagation(),this.panel.classList.add("loading"),v(this.panel).then((()=>this.panel.classList.remove("loading"))),this.panel.style.minHeight=t.detail.secondaryMenu.scrollHeight+"px")}secondaryClose(t){t.detail.secondaryMenu&&(t.stopPropagation(),t.target.parentElement&&(this.panel.style.minHeight=t.target.parentElement.scrollHeight+"px"))}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.handlePanelSelect=this.handlePanelSelect.bind(this),this.containingElement||(this.containingElement=this.host)}componentDidLoad(){this.popover=new g(this.trigger,this.positioner,{strategy:this.hoist?"fixed":"absolute",placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.panel,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit(),onTransitionEnd:()=>{this.open||(this.panel.scrollTop=0)}}),this.open&&this.show()}disconnectedCallback(){this.hide(),this.popover&&this.popover.destroy()}async show(){if(this.ignoreOpenWatcher=!0,this.open=!0,this.nanoShow.emit().defaultPrevented)return this.open=!1,void(this.ignoreOpenWatcher=!1);this.popover.show(),this.ignoreOpenWatcher=!1,document.addEventListener("mousedown",this.handleDocumentMouseDown),document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){if(this.ignoreOpenWatcher=!0,this.open=!1,this.nanoHide.emit().defaultPrevented)return this.open=!0,void(this.ignoreOpenWatcher=!1);this.popover&&this.popover.hide(),this.ignoreOpenWatcher=!1,document.removeEventListener("mousedown",this.handleDocumentMouseDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),this.menuFocused=!1}getMenu(){return this.host.querySelector("nano-menu")}handleDocumentKeyDown(t){if("Escape"===t.key)return void this.hide();"Tab"===t.key&&setTimeout((()=>{document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement&&this.hide()}));const e=this.getMenu();if(e&&["ArrowDown","ArrowUp"].includes(t.key)){if(!this.open||this.menuFocused)return;return t.preventDefault(),void e.setFocus()}e&&t.target!==e&&e.dispatchEvent(new KeyboardEvent(t.type,t))}handleDocumentMouseDown(t){t.target.closest(this.containingElement.tagName.toLowerCase())===this.containingElement||this.hide()}handlePanelSelect(t){this.closeOnSelect&&"nano-menu"===t.target.tagName.toLowerCase()&&this.hide()}updateAccessibleTrigger(){const t=Array.from(this.host.querySelectorAll('[slot="trigger"]')).map(m)[0];t&&(t.setAttribute("aria-haspopup","true"),t.setAttribute("aria-expanded",this.open?"true":"false"))}render(){return t("div",{part:"base",id:this.dropdownId,class:{dropdown:!0,"dropdown--open":this.open},"aria-expanded":this.open?"true":"false","aria-haspopup":"true"},t("span",{part:"trigger",class:"dropdown__trigger",ref:t=>this.trigger=t,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},t("slot",{name:"trigger",onSlotchange:this.handleTriggerSlotChange})),t("div",{ref:t=>this.positioner=t,class:"dropdown__positioner"},t("div",{ref:t=>this.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:void 0},this.dialogTitle&&t("h2",{id:this.labelId,class:"dropdown__accessible-title","aria-live":"polite"},this.dialogTitle),t("slot",null))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};let O=0;T.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:export{screen:1000}:host{--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:0px 2px 8px rgba(0, 0, 0, 0.1);box-shadow:0px 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(0px) translateZ(0);transform:translateY(0px) 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}";export{A as nano_date_picker,T as nano_dropdown}
-//# sourceMappingURL=p-a9963077.entry.js.map