@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/nano-components/nano-dialog.entry.js.map

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

package/dist/nano-components/nano-drawer.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,c as a,g as r,a as t}from"./index-6cc72cd9.js";import{h as i}from"./renderer-4bc3e2dc.js";import{M as n}from"./modal-02828a39.js";import{l as o,u as s}from"./scroll-1afc6a4e.js";import{h as d}from"./slot-1cd90e53.js";import{w as l}from"./events-f38f3e59.js";import{C as c}from"./component-store-199a9fd8.js";import"./tabbable-44932eb7.js";import"./dom-fafdec9a.js";import"./throttle-df960210.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--size:25rem;--panel-background:white;--panel-shadow:var(--nano-layer-shadow-xlarge, 0 4px 16px rgba(0, 0, 0, 0.4));--scrim-color:var(--nano-layer-overlay-dark, rgb(74 74 74 / 50%));--header-button-color:#b5aea7;--footer-background:#e4e6e8;--header-background:var(--panel-background);--header-spacing:var(--nano-spacing-large, 20px);--body-spacing:var(--nano-spacing-large, 20px);--footer-spacing:var(--nano-spacing-medium, 16px) var(--nano-spacing-large, 20px);--dir:1}:host(:dir(rtl)){--dir:-1}:host-context([dir=rtl]){--dir:-1}.drawer{inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;pointer-events:none;overflow:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--nano-layer-index-modal, 700)}.drawer__panel{position:absolute;z-index:2;max-inline-size:100%;max-block-size:100%;background-color:var(--panel-background);box-shadow:var(--panel-shadow);pointer-events:all;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;display:flex;flex-direction:column}@media (forced-colors: active){.drawer__panel{border:solid 1px #4a4a4a}}.drawer__panel:focus{outline:none}.drawer--nodismiss .drawer__panel{animation:cannotClose 0.25s ease-in-out 1}@keyframes cannotClose{0%{scale:1}50%{scale:1.08}100%{scale:1}}.drawer--top .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(-100%)}.drawer--bottom .drawer__panel{inset-block:auto 0;inset-inline:0 auto;inline-size:100%;block-size:var(--size);opacity:0;transform:translateY(100%)}.drawer--top.drawer--open .drawer__panel,.drawer--bottom.drawer--open .drawer__panel{opacity:1;transform:translateY(0)}.drawer--start .drawer__panel{inset-block:0 auto;inset-inline:0 auto;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * -100%))}.drawer--end .drawer__panel{inset-block:0 auto;inset-inline:auto 0;inline-size:var(--size);block-size:100%;opacity:0;transform:translateX(calc(var(--dir) * 100%))}.drawer--start.drawer--open .drawer__panel{opacity:1;transform:translateX(0)}.drawer--end.drawer--open .drawer__panel{opacity:1;transform:translateX(calc(var(--nano-scroll-lock-size) * -1))}.drawer__header{inline-size:100%;display:flex;background-color:var(--header-background)}[stuck] .drawer__header{box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.drawer__title{flex:1 1 auto;font:inherit;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.2;padding:var(--header-spacing);margin:0}.drawer__header-actions{flex-shrink:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nano-spacing-xsmall, 4px);padding:0 var(--header-spacing)}.drawer__header-actions .drawer__close,.drawer__header-actions ::slotted(.nano-icon-button){flex:0 0 auto;display:flex;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);--color:var(--header-button-color)}.drawer__main{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto}.drawer__body{display:block;flex:1 1 auto;padding:var(--body-spacing);padding-block:0 var(--body-spacing);padding-inline:var(--body-spacing)}.drawer:not(.drawer--has-header) .drawer__body{padding-block-start:var(--body-spacing)}.drawer__footer{inline-size:100%;text-align:end;padding:var(--footer-spacing);background:var(--footer-background);inset-block-start:1px;position:relative}.drawer__footer ::slotted(button:not(:last-of-type)){margin-inline-end:var(--nano-spacing-xsmall, 4px)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;inset:0;background-color:var(--scrim-color);pointer-events:all;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));opacity:0;transition:var(--nano-transition-fast, 0.3s) opacity}.drawer--open .drawer__overlay{opacity:1}.drawer--contained .drawer__overlay{display:none}";const f=h;const p=class{constructor(r){e(this,r);this.nanoShow=a(this,"nanoShow",7);this.nanoHide=a(this,"nanoHide",7);this.nanoAfterHide=a(this,"nanoAfterHide",7);this.nanoAfterShow=a(this,"nanoAfterShow",7);this.nanoInitialFocus=a(this,"nanoInitialFocus",7);this.nanoRquestClose=a(this,"nanoRquestClose",7)}get host(){return r(this)}originalTrigger;drawer;overlay;modal;get panel(){return this._panel}set panel(e){if(this._panel){this.panel.removeEventListener("animationend",this.handleTransitionEnd)}if(!e)return;e.addEventListener("transitionend",this.handleTransitionEnd);this._panel=e}_panel;noDismiss=false;hasFooter;open=false;label;placement="end";contained=false;noHeader=false;storeId;storeMethod="url-hash";noUserDismiss=false;hoist=false;handleHoistChange(){if(!this.hoist||Array.from(document.body.children).includes(this.host))return;document.body.prepend(this.host)}nanoShow;nanoHide;nanoAfterHide;nanoAfterShow;nanoInitialFocus;nanoRquestClose;async show(){if(this.open)return undefined;this.open=true;return l(this.host,"nanoAfterShow")}async hide(){if(!this.open)return undefined;this.open=false;return l(this.host,"nanoAfterHide")}requestClose(e){const a=this.nanoRquestClose.emit({source:e});if(a.defaultPrevented||this.noUserDismiss){this.noDismiss=true;setTimeout((()=>this.noDismiss=false),250);return}this.hide()}handleNoModalChange(){if(this.open&&!this.contained){this.modal.activate();o(this.host)}if(this.open&&this.contained){this.modal.deactivate();s(this.host)}}async handleOpenChange(){if(this.open){this.nanoShow.emit();this.addOpenListeners();this.originalTrigger=document.activeElement;if(!this.contained){this.modal.activate();o(this.host)}const e=this.host.querySelector("[autofocus]");if(e){e.removeAttribute("autofocus")}this.drawer.hidden=false;requestAnimationFrame((()=>{const a=this.nanoInitialFocus.emit();if(!a.defaultPrevented){if(e){e.focus({preventScroll:true})}else{this.panel.focus({preventScroll:true})}}if(e){e.setAttribute("autofocus","")}}));this.nanoAfterShow.emit();return}this.nanoHide.emit();this.removeOpenListeners();if(!this.contained){this.modal.deactivate();s(this.host)}const e=this.originalTrigger;if(typeof e?.focus==="function"){setTimeout((()=>e.focus()))}}addOpenListeners(){document.addEventListener("keydown",this.handleDocumentKeyDown)}removeOpenListeners(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleDocumentKeyDown=e=>{if(this.contained){return}if(e.key==="Escape"&&this.modal.isActive()&&this.open){e.stopImmediatePropagation();this.requestClose("keyboard")}};handleTransitionEnd=e=>{if(e.propertyName==="opacity"&&e.composedPath().find((e=>e===this.panel||e===this.overlay))){if(!this.open){this.drawer.hidden=true;this.overlay.hidden=false;this.panel.hidden=false}if(this.open)this.nanoAfterShow.emit();else this.nanoAfterHide.emit()}};handleSlotChange=()=>{this.hasFooter=d(this.host,"footer")};connectedCallback(){this.handleHoistChange();this.modal=new n(this.host)}disconnectedCallback(){s(this.host)}componentWillLoad(){this.handleSlotChange();if(this.open)this.show();if(this.storeId)c.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.drawer.hidden=!this.open;if(this.open){this.addOpenListeners();if(!this.contained){this.modal.activate();o(this.host)}}}render(){return i(t,{key:"3993edab973a4e83921ef48b3a856eab71314995",class:"nano-drawer"},i("div",{key:"81b617363f43048bb8e692838304641ed431e716",ref:e=>this.drawer=e,part:"base",class:{drawer:true,"drawer--open":this.open,[`drawer--${this.placement}`]:true,"drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":d(this.host,"footer"),"drawer--has-header":!this.noHeader,"drawer--nodismiss":this.noDismiss}},i("div",{key:"92742f6c66f84178beec198eafa587f1e8386764",ref:e=>this.overlay=e,part:"overlay",class:"drawer__overlay",onClick:()=>this.requestClose("overlay"),tabindex:"-1"}),i("div",{key:"6e083a039111b507f9a86b485e6b22b5b47c3f69",ref:e=>this.panel=e,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:undefined,"aria-labelledby":!this.noHeader?"title":undefined,tabindex:"0"},i("div",{key:"6b32c26cbc35acd4717fa7f9cc80d829e8866433",class:"drawer__main"},!this.noHeader&&i("nano-sticker",{key:"9969d99e402c4ea254aa25c2cff35e12fb60a9bc"},i("div",{key:"75e40fc490e870674d055ac10c1862e6be48f03e",part:"header",class:"drawer__header"},i("h2",{key:"cdb1ebcff62005cc38f56613d5e2c0bd1a47749f",part:"title",class:"drawer__title",id:"title"},i("slot",{key:"e5c7f9fe9f4c32f36b978a8bdab51b7954fe7afd",name:"label"},this.label.length>0?this.label:String.fromCharCode(65279))),i("div",{key:"c78dcf660ad85ae8e2c9191ddf8609d8e8847a95",part:"header-actions",class:"drawer__header-actions"},i("slot",{key:"b7dc420567ab5f0e74b57141a0779603bc244318",name:"header-actions"}),!this.noUserDismiss&&i("nano-icon-button",{key:"7269bc1bfa339e44d07466bc8b540b36c566fe2e",part:"close-button",exportparts:"base:close-button__base",class:"drawer__close",iconName:"light/xmark",label:"Close",onClick:()=>this.requestClose("close-button")})))),i("div",{key:"7ac9f1fc50efa2e13f73d5b15655ed585909a94d",part:"body",class:"drawer__body"},i("slot",{key:"9f797d1de7cdcf634e2ee51d5e0bc055bae138df"})),i("nano-sticker",{key:"8807c8a2fc16f784f62e11c23edd607b757ab2b4",position:"bottom"},i("footer",{key:"a96da38ea84661627d2d905207f0c23e49962611",part:"footer",class:"drawer__footer"},i("slot",{key:"da0386d4942cf4ab05c605735a080321b6f87204",name:"footer",onSlotchange:this.handleSlotChange})))))))}static get watchers(){return{hoist:["handleHoistChange"],contained:["handleNoModalChange"],open:["handleOpenChange"]}}};p.style=f;export{p as nano_drawer};
-//# sourceMappingURL=nano-drawer.entry.js.map

package/dist/nano-components/nano-drawer.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["drawerCss","NanoDrawerStyle0","Drawer","originalTrigger","drawer","overlay","modal","panel","this","_panel","ele","removeEventListener","handleTransitionEnd","addEventListener","noDismiss","hasFooter","open","label","placement","contained","noHeader","storeId","storeMethod","noUserDismiss","hoist","handleHoistChange","Array","from","document","body","children","includes","host","prepend","nanoShow","nanoHide","nanoAfterHide","nanoAfterShow","nanoInitialFocus","nanoRquestClose","show","undefined","waitForEvent","hide","requestClose","source","nanoRequestClose","emit","defaultPrevented","setTimeout","handleNoModalChange","activate","lockBodyScrolling","deactivate","unlockBodyScrolling","handleOpenChange","addOpenListeners","activeElement","autoFocusTarget","querySelector","removeAttribute","hidden","requestAnimationFrame","focus","preventScroll","setAttribute","removeOpenListeners","trigger","handleDocumentKeyDown","event","key","isActive","stopImmediatePropagation","propertyName","composedPath","find","node","handleSlotChange","hasSlot","connectedCallback","Modal","disconnectedCallback","componentWillLoad","ComponentStore","init","componentDidLoad","render","h","Host","class","ref","part","onClick","tabindex","role","id","name","length","String","fromCharCode","exportparts","iconName","position","onSlotchange"],"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to #{tokens.$layer-shadow-xlarge};\n  * @prop --scrim-color: overlay colour of alert display. Defaults to #{tokens.$layer-overlay-dark};\n  * @prop --footer-background: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --header-spacing: The amount of padding to use for the header.\n  * @prop --body-spacing: The amount of padding to use for the body.\n  * @prop --footer-spacing: The amount of padding to use for the footer. Defaults to #{tokens.$spacing-medium} #{tokens.$spacing-large}\n  * @prop --header-button-color: defaults to #{map.get(tokens.$colors, palegrey)};\n  */\n\n  --size: 25rem;\n  --panel-background: white;\n  --panel-shadow: #{tokens.$layer-shadow-xlarge};\n  --scrim-color: #{tokens.$layer-overlay-dark};\n  --header-button-color: #{map.get(tokens.$colors, palegrey)};\n  --footer-background: #{map.get(tokens.$colors, lightgrey)};\n  --header-background: var(--panel-background);\n  --header-spacing: #{tokens.$spacing-large};\n  --body-spacing: #{tokens.$spacing-large};\n  --footer-spacing: #{tokens.$spacing-medium} #{tokens.$spacing-large};\n  --dir: 1;\n}\n\n@include mx.rtl-host() {\n  --dir: -1;\n}\n\n.drawer {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  &--fixed {\n    position: fixed;\n    z-index: #{tokens.$layer-index-modal};\n  }\n}\n\n.drawer__panel {\n  position: absolute;\n  z-index: 2;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  background-color: var(--panel-background);\n  box-shadow: var(--panel-shadow);\n  pointer-events: all;\n  transition: #{tokens.$transition-fast} opacity, #{tokens.$transition-fast} transform;\n  display: flex;\n  flex-direction: column;\n\n  @media (forced-colors: active) {\n    border: solid 1px #{map.get(tokens.$colors, black)};\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  .drawer--nodismiss & {\n    animation: cannotClose 0.25s ease-in-out 1;\n    // transform-origin: center center;\n\n    @keyframes cannotClose {\n      0% {\n        scale: 1;\n      }\n\n      50% {\n        scale: 1.08;\n      }\n\n      100% {\n        scale: 1;\n      }\n    }\n  }\n\n  .drawer--top & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  .drawer--bottom & {\n    inset-block: auto 0;\n    inset-inline: 0 auto;\n    inline-size: 100%;\n    block-size: var(--size);\n    opacity: 0;\n    transform: translateY(100%);\n  }\n\n  .drawer--top.drawer--open &,\n  .drawer--bottom.drawer--open & {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .drawer--start & {\n    inset-block: 0 auto;\n    inset-inline: 0 auto;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc(var(--dir) * -100%));\n  }\n\n  .drawer--end & {\n    inset-block: 0 auto;\n    inset-inline: auto 0;\n    inline-size: var(--size);\n    block-size: 100%;\n    opacity: 0;\n    transform: translateX(calc((var(--dir) * 100%)));\n  }\n\n  .drawer--start.drawer--open & {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  .drawer--end.drawer--open & {\n    opacity: 1;\n    transform: translateX(calc(var(--nano-scroll-lock-size) * -1));\n  }\n}\n\n.drawer__header {\n  inline-size: 100%;\n  display: flex;\n  background-color: var(--header-background);\n\n  [stuck] & {\n    box-shadow: #{tokens.$layer-shadow-medium};\n  }\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font: inherit;\n  font-size: #{tokens.$fontsize-large};\n  line-height: 1.2;\n  padding: var(--header-spacing);\n  margin: 0;\n}\n\n.drawer__header-actions {\n  flex-shrink: 0;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: #{tokens.$spacing-xsmall};\n  padding: 0 var(--header-spacing);\n\n  .drawer__close,\n  ::slotted(.nano-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: #{tokens.$fontsize-xlarge};\n\n    --color: var(--header-button-color);\n  }\n}\n\n.drawer__main {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n  flex: 1 1 auto;\n}\n\n.drawer__body {\n  display: block;\n  flex: 1 1 auto;\n  padding: var(--body-spacing);\n  padding-block: 0 var(--body-spacing);\n  padding-inline: var(--body-spacing);\n\n  .drawer:not(.drawer--has-header) & {\n    padding-block-start: var(--body-spacing);\n  }\n}\n\n.drawer__footer {\n  inline-size: 100%;\n  text-align: end;\n  padding: var(--footer-spacing);\n  background: var(--footer-background);\n  inset-block-start: 1px;\n  position: relative;\n\n  ::slotted(button:not(:last-of-type)) {\n    margin-inline-end: #{tokens.$spacing-xsmall};\n  }\n\n  .drawer:not(.drawer--has-footer) & {\n    display: none;\n  }\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  inset: 0;\n  background-color: var(--scrim-color);\n  pointer-events: all;\n  backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  opacity: 0;\n  transition: #{tokens.$transition-fast} opacity;\n\n  .drawer--open & {\n    opacity: 1;\n  }\n\n  .drawer--contained & {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  ComponentInterface,\n  Method,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport Modal from '../../utils/modal';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { waitForEvent } from '../../utils/events';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Drawers slide in from a container to expose additional options and information.\n *\n * @slot - The drawer's main content\n * @slot label - The drawer's label. Alternatively, you can use the `label` attribute\n * @slot header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @slot footer - The drawer's footer, usually one or more buttons representing various options\n *\n * @part base - The component's base wrapper\n * @part overlay - The overlay that covers the screen behind the drawer\n * @part panel - The drawer's panel (where the drawer and its content are rendered)\n * @part header - The drawer's header. This element wraps the title and header actions\n * @part header-actions - Optional actions to add to the header. Works best with `<nano-icon-button>`\n * @part title - The drawer's title\n * @part close-button - The close button, an `<nano-icon-button>`\n * @part close-button__base - The close button's exported `base` part\n * @part body - The drawer's body\n * @part footer - The drawer's footer\n */\n\n@Component({\n  tag: 'nano-drawer',\n  shadow: true,\n  styleUrl: 'drawer.scss',\n})\nexport class Drawer implements ComponentInterface {\n  // Private State\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  private originalTrigger: HTMLElement | null;\n  private drawer: HTMLElement;\n  private overlay: HTMLElement;\n  private modal: Modal;\n\n  get panel() {\n    return this._panel;\n  }\n  set panel(ele: HTMLElement) {\n    if (this._panel) {\n      this.panel.removeEventListener('animationend', this.handleTransitionEnd);\n    }\n    if (!ele) return;\n\n    ele.addEventListener('transitionend', this.handleTransitionEnd);\n    this._panel = ele;\n  }\n  private _panel: HTMLElement;\n\n  @State() noDismiss = false;\n  @State() hasFooter: boolean;\n\n  // Public API\n\n  /**\n   * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @Prop({ reflect: true }) label!: string;\n\n  /** The direction from which the drawer will open. */\n  @Prop({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' =\n    'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this attribute and add `position: relative` to the parent.\n   */\n  @Prop({ reflect: true }) contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop({ reflect: true }) noHeader = false;\n\n  /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */\n  @Prop() storeId?: string;\n\n  /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */\n  @Prop() storeMethod: StorageMethods = 'url-hash';\n\n  /** An alternative to `preventDefault()` on the `nanoRequestClose` event. This will hide the close button and disable clicks on the overlay or presses the `Escape` key  */\n  @Prop() noUserDismiss = false;\n\n  /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */\n  @Prop() hoist = false;\n\n  @Watch('hoist')\n  handleHoistChange() {\n    if (!this.hoist || Array.from(document.body.children).includes(this.host))\n      return;\n    document.body.prepend(this.host);\n  }\n\n  /** Emitted when the drawer opens. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted when the drawer closes. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the drawer closes and all animations are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /** Emitted after the drawer opens and all animations are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer opens and is ready to receive focus. Calling\n   * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n   */\n  @Event() nanoInitialFocus: EventEmitter;\n\n  /**\n   * Emitted when the user attempts to\n   * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n   * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\n   * destructive behavior such as data loss.\n   */\n  @Event() nanoRquestClose: EventEmitter<{\n    source: 'close-button' | 'keyboard' | 'overlay';\n  }>;\n\n  /**\n   * Shows the drawer.\n   * @returns a promise that resolves when the drawer has finished opening\n   */\n  @Method()\n  async show() {\n    if (this.open) return undefined;\n\n    this.open = true;\n    return waitForEvent(this.host, 'nanoAfterShow');\n  }\n\n  /**\n   * Hides the drawer\n   * @returns a promise that resolves when the drawer has finished closing\n   */\n  @Method()\n  async hide() {\n    if (!this.open) return undefined;\n\n    this.open = false;\n    return waitForEvent(this.host, 'nanoAfterHide');\n  }\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const nanoRequestClose = this.nanoRquestClose.emit({ source });\n\n    if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {\n      this.noDismiss = true;\n      setTimeout(() => (this.noDismiss = false), 250);\n      return;\n    }\n\n    this.hide();\n  }\n\n  // Prop Change Handlers\n\n  @Watch('contained')\n  handleNoModalChange() {\n    if (this.open && !this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open && this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n  }\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.nanoShow.emit();\n      this.addOpenListeners();\n      this.originalTrigger = document.activeElement as HTMLElement;\n\n      // Lock body scrolling only if the drawer isn't contained\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n\n      // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the\n      // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`\n      // ourselves, and add the attribute back afterwards.\n      const autoFocusTarget = this.host.querySelector('[autofocus]');\n      if (autoFocusTarget) {\n        autoFocusTarget.removeAttribute('autofocus');\n      }\n      this.drawer.hidden = false;\n\n      // Set initial focus\n      requestAnimationFrame(() => {\n        const nanoInitialFocus = this.nanoInitialFocus.emit();\n\n        if (!nanoInitialFocus.defaultPrevented) {\n          // Set focus to the autofocus target and restore the attribute\n          if (autoFocusTarget) {\n            (autoFocusTarget as HTMLInputElement).focus({\n              preventScroll: true,\n            });\n          } else {\n            this.panel.focus({ preventScroll: true });\n          }\n        }\n\n        // Restore the autofocus attribute\n        if (autoFocusTarget) {\n          autoFocusTarget.setAttribute('autofocus', '');\n        }\n      });\n\n      this.nanoAfterShow.emit();\n      return;\n    }\n\n    // Hide\n    this.nanoHide.emit();\n    this.removeOpenListeners();\n\n    if (!this.contained) {\n      this.modal.deactivate();\n      unlockBodyScrolling(this.host);\n    }\n\n    // Restore focus to the original trigger\n    const trigger = this.originalTrigger;\n    if (typeof trigger?.focus === 'function') {\n      setTimeout(() => trigger.focus());\n    }\n  }\n\n  // Event Handling\n\n  private addOpenListeners() {\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Contained drawers aren't modal and don't response to the escape key\n    if (this.contained) {\n      return;\n    }\n\n    if (event.key === 'Escape' && this.modal.isActive() && this.open) {\n      event.stopImmediatePropagation();\n      this.requestClose('keyboard');\n    }\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    if (\n      event.propertyName === 'opacity' &&\n      event\n        .composedPath()\n        .find((node) => node === this.panel || node === this.overlay)\n    ) {\n      if (!this.open) {\n        this.drawer.hidden = true;\n        // Now that the dialog is hidden, restore the overlay and panel for next time\n        this.overlay.hidden = false;\n        this.panel.hidden = false;\n      }\n      if (this.open) this.nanoAfterShow.emit();\n      else this.nanoAfterHide.emit();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  // Component Lifecycle\n\n  connectedCallback() {\n    this.handleHoistChange();\n    this.modal = new Modal(this.host);\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n    // Show on init if open\n    if (this.open) this.show();\n    if (this.storeId)\n      ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);\n  }\n\n  componentDidLoad() {\n    this.drawer.hidden = !this.open;\n\n    if (this.open) {\n      this.addOpenListeners();\n\n      if (!this.contained) {\n        this.modal.activate();\n        lockBodyScrolling(this.host);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-drawer\">\n        <div\n          ref={(ele) => (this.drawer = ele)}\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            [`drawer--${this.placement}`]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': hasSlot(this.host, 'footer'),\n            'drawer--has-header': !this.noHeader,\n            'drawer--nodismiss': this.noDismiss,\n          }}\n        >\n          <div\n            ref={(ele) => (this.overlay = ele)}\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={() => this.requestClose('overlay')}\n            tabindex=\"-1\"\n          />\n\n          <div\n            ref={(ele) => (this.panel = ele)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : undefined}\n            aria-labelledby={!this.noHeader ? 'title' : undefined}\n            tabindex=\"0\"\n          >\n            <div class=\"drawer__main\">\n              {!this.noHeader && (\n                <nano-sticker>\n                  <div part=\"header\" class=\"drawer__header\">\n                    <h2 part=\"title\" class=\"drawer__title\" id=\"title\">\n                      {/* If there's no label, use an invisible character to prevent the header from collapsing */}\n                      <slot name=\"label\">\n                        {this.label.length > 0\n                          ? this.label\n                          : String.fromCharCode(65279)}\n                      </slot>\n                    </h2>\n                    <div part=\"header-actions\" class=\"drawer__header-actions\">\n                      <slot name=\"header-actions\" />\n\n                      {!this.noUserDismiss && (\n                        <nano-icon-button\n                          part=\"close-button\"\n                          exportparts=\"base:close-button__base\"\n                          class=\"drawer__close\"\n                          iconName=\"light/xmark\"\n                          label=\"Close\"\n                          onClick={() => this.requestClose('close-button')}\n                        />\n                      )}\n                    </div>\n                  </div>\n                </nano-sticker>\n              )}\n\n              <div part=\"body\" class=\"drawer__body\">\n                <slot />\n              </div>\n\n              <nano-sticker position=\"bottom\">\n                <footer part=\"footer\" class=\"drawer__footer\">\n                  <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n                </footer>\n              </nano-sticker>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-dropdown.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as e,c as i,g as t,a as o}from"./index-6cc72cd9.js";import{g as s}from"./active-element-a2502948.js";import{P as n}from"./popover-30ce6cac.js";import{a as r}from"./tabbable-44932eb7.js";import{t as a,h as d}from"./renderer-4bc3e2dc.js";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}: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:auto;--dropdown-z-index:var(--nano-layer-index-dropdown, 300);--min-width:0;--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));--menu-height:var(--max-menu-height, 50vh);display:flex}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index);min-inline-size:var(--min-width);border:0;background:none;padding:0;overflow:visible;color:unset}.dropdown__positioner::backdrop{display:none}.dropdown__positioner[popover],.dropdown__positioner:popover-open{inset:unset}@media (width <= 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);min-inline-size:var(--min-width);inline-size:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentcolor;box-shadow:var(--box-shadow);opacity:0;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;min-block-size:20px;overflow:var(--overflow);box-sizing:content-box !important}.dropdown__panel.loading{overflow-y:hidden}.dropdown__panel.top{transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(.nano-menu){max-block-size:var(--menu-height)}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";const l=h;let p=0;const c=class{constructor(t){e(this,t);this.nanoShow=i(this,"nanoShow",7);this.nanoAfterShow=i(this,"nanoAfterShow",7);this.nanoHide=i(this,"nanoHide",7);this.nanoAfterHide=i(this,"nanoAfterHide",7)}dropdownId=`dropdown-${p++}`;labelId=this.dropdownId+"-title";ignoreOpenWatcher=false;panel;popover;trigger;positioner;accessibleTrigger;didLoad=false;get menu(){return this.host.querySelector(a("nano-menu"))}get host(){return t(this)}autoOpen=true;open=false;handleOpenChange(){if(this.ignoreOpenWatcher)return;if(this.open)this.show();else this.hide();if(this.accessibleTrigger){this.accessibleTrigger.setAttribute("aria-expanded",this.open.toString());return}this.updateAccessibleTrigger()}closeOnSelect=true;containingElement;tetherTo=null;handleTetherToChange(){this.createPopover();this.updateAccessibleTrigger()}placement="bottom-start";distance=2;skidding=0;hoist=false;handlePopoverOptionsChange(){if(!this.popover)return;this.popover.setOptions({strategy:this.hoist?"fixed":"absolute",placement:this.placement,skidding:this.skidding,distance:this.distance})}dialogTitle;nanoShow;nanoAfterShow;nanoHide;nanoAfterHide;eventType;secondaryOpen(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();this.panel.classList.add("loading");this.panel.addEventListener("transitionend",(()=>{this.panel.classList.remove("loading")}),{once:true});this.panel.style.minHeight=e.detail.secondaryMenu.scrollHeight+"px"}secondaryClose(e){if(!e.detail.secondaryMenu)return;e.stopPropagation();if(!e.target.parentElement)return;this.panel.style.minHeight=e.target.parentElement.scrollHeight+"px"}handlePanelSelect(e){const i=e.target;if(this.closeOnSelect&&i.tagName.toLowerCase()===a("nano-menu"))this.hide()}async show(){this.ignoreOpenWatcher=true;this.open=true;const e=this.nanoShow.emit();if(e.defaultPrevented){this.open=false;this.ignoreOpenWatcher=false;return}if(typeof this.positioner?.showPopover==="function"){this.hoist=true;this.popover.show();this.positioner.showPopover()}else{this.popover.show()}this.ignoreOpenWatcher=false;document.addEventListener("mousedown",this.handleDocumentMouseDown);document.addEventListener("keydown",this.handleDocumentKeyDown)}async hide(){this.ignoreOpenWatcher=true;this.open=false;const e=this.nanoHide.emit();if(e.defaultPrevented){this.open=true;this.ignoreOpenWatcher=false;return}if(this.popover)this.popover.hide();this.ignoreOpenWatcher=false;document.removeEventListener("mousedown",this.handleDocumentMouseDown);document.removeEventListener("keydown",this.handleDocumentKeyDown);if(this.accessibleTrigger&&this.focusEleInDropDwn()){this.accessibleTrigger.focus()}setTimeout((()=>{if(!this.open&&typeof this.positioner?.hidePopover==="function"){this.positioner.hidePopover()}}),300)}focusEleInDropDwn(e){const i=s();if(e&&e.composedPath()?.length){const i=e.composedPath().includes(this.containingElement);if(i)return i;return e.composedPath().includes(this.accessibleTrigger)}return i&&i.closest(this.containingElement.tagName.toLowerCase())===this.containingElement&&i!==this.accessibleTrigger}togglePanel=()=>{if(!this.autoOpen)return;if(this.open)this.hide();else this.show()};updateAccessibleTrigger(){if(!this.didLoad)return;let e;this.accessibleTrigger=null;if(!this.tetherTo){const i=Array.from(this.host.querySelectorAll('[slot="trigger"]'));e=i.map(r)[0]}else{e=r(this.tetherTo)}if(e&&!e.getAttribute("aria-haspopup")){e.setAttribute("aria-haspopup","true");e.setAttribute("aria-expanded",this.open?"true":"false");this.accessibleTrigger=e}}handleDocumentKeyDown(e){if(e.key==="Escape"){this.hide();return}if(e.key==="Tab"){setTimeout((()=>{if(document.activeElement&&document.activeElement.closest(this.containingElement.tagName.toLowerCase())!==this.containingElement){this.hide();return}}))}if(this.menu&&["ArrowDown","ArrowUp"].includes(e.key)){if(!this.open||this.focusEleInDropDwn(e))return;e.preventDefault();this.menu.setFocus();return}const i=e.composedPath();if(this.menu&&i.length&&!i.find((e=>e!==this.menu))){this.menu.dispatchEvent(new KeyboardEvent(e.type,e));return}}handleDocumentMouseDown(e){if(!this.focusEleInDropDwn(e)){this.hide();return}}handleTriggerKeyDown=e=>{if(["ArrowDown","ArrowUp"," "].includes(e.key)){this.show();e.preventDefault();e.stopPropagation();if(this.menu)this.menu.setFocus()}};handleTriggerSlotChange=()=>{this.updateAccessibleTrigger()};createPopover(){if(!this.tetherTo&&!this.trigger||!this.positioner)return;if(this.popover){if(this.open)this.hide();this.popover.destroy();this.popover=null}this.popover=new n(this.tetherTo||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:()=>{if(!this.open){this.panel.scrollTop=0}else if(this.menu){this.menu.showActiveElement()}}});if(this.open){this.show()}}connectedCallback(){this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this);this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this);if(!this.containingElement)this.containingElement=this.host}componentDidLoad(){this.didLoad=true;this.createPopover();setTimeout((()=>this.updateAccessibleTrigger()),100)}disconnectedCallback(){if(this.host.isConnected)this.hide();if(this.popover)this.popover.destroy()}render(){return d(o,{key:"85c1bf918fa0800659aaab7d64c6832134d9b003",class:"nano-dropdown"},d("div",{key:"9cc1b9eba8d8fea321f85c71cdd5fef1d823d03e",part:"base",id:this.dropdownId,class:{dropdown:true,"dropdown--open":this.open}},d("span",{key:"06975a344a9d5760057a1531dd43e4dea9a6eed9",part:"trigger",class:"dropdown__trigger",ref:e=>this.trigger=e,onKeyDown:this.handleTriggerKeyDown,onClick:this.togglePanel},d("slot",{key:"6a5adccd87e2fa3c763cb2bdadff0aa4323c3da3",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),d("div",{key:"1a887678dd9cc47a8192060478a5d7acdb06600e",ref:e=>this.positioner=e,class:"dropdown__positioner",popover:"manual",id:this.dropdownId+"-positioner"},d("div",{key:"c81fc552c814c87e2df44bf8022c38729069240b",ref:e=>this.panel=e,part:"panel",class:`dropdown__panel ${this.placement.split("-").join(" ")}`,"aria-hidden":!this.open,role:this.host.getAttribute("role")==="group"?"group":"dialog","aria-modal":this.host.getAttribute("role")==="group"?undefined:"true","aria-labelledby":this.dialogTitle?this.labelId:undefined},this.dialogTitle&&d("span",{key:"6d38bbf3d0d4411190dac237f2daa0815fafa420",id:this.labelId,class:"dropdown__accessible-title","aria-live":this.host.getAttribute("role")==="group"?undefined:"polite"},this.dialogTitle),d("slot",{key:"8ad35ae3a28c6a057d1cf408e9256605759916ba"})))))}static get watchers(){return{open:["handleOpenChange"],tetherTo:["handleTetherToChange"],placement:["handlePopoverOptionsChange"],distance:["handlePopoverOptionsChange"],skidding:["handlePopoverOptionsChange"],hoist:["handlePopoverOptionsChange"]}}};c.style=l;export{c as nano_dropdown};
-//# sourceMappingURL=nano-dropdown.entry.js.map

package/dist/nano-components/nano-dropdown.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","NanoDropdownStyle0","dropDownIds","Dropdown","dropdownId","labelId","this","ignoreOpenWatcher","panel","popover","trigger","positioner","accessibleTrigger","didLoad","menu","host","querySelector","transformTag","autoOpen","open","handleOpenChange","show","hide","setAttribute","toString","updateAccessibleTrigger","closeOnSelect","containingElement","tetherTo","handleTetherToChange","createPopover","placement","distance","skidding","hoist","handlePopoverOptionsChange","setOptions","strategy","dialogTitle","nanoShow","nanoAfterShow","nanoHide","nanoAfterHide","eventType","secondaryOpen","ev","detail","secondaryMenu","stopPropagation","classList","add","addEventListener","remove","once","style","minHeight","scrollHeight","secondaryClose","target","parentElement","handlePanelSelect","event","tagName","toLowerCase","emit","defaultPrevented","showPopover","document","handleDocumentMouseDown","handleDocumentKeyDown","removeEventListener","focusEleInDropDwn","focus","setTimeout","hidePopover","e","activeElement","getActiveElement","composedPath","length","ddInPath","includes","closest","togglePanel","assignedElements","Array","from","querySelectorAll","map","getNearestTabbableElement","getAttribute","key","preventDefault","setFocus","ePath","find","el","dispatchEvent","KeyboardEvent","type","handleTriggerKeyDown","handleTriggerSlotChange","destroy","Popover","transitionElement","onAfterHide","onAfterShow","onTransitionEnd","scrollTop","showActiveElement","connectedCallback","bind","componentDidLoad","disconnectedCallback","isConnected","render","h","Host","class","part","id","dropdown","ref","onKeyDown","onClick","name","onSlotchange","split","join","role","undefined"],"sources":["src/components/dropdown/dropdown.scss?tag=nano-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens/layers' as tokens;\n\n:host {\n  /**\n   * @prop --width: width of the dropdown. Defaults to 'auto'\n   * @prop --border: Defaults to #{tokens.$layer-border-style}\n   * @prop --border-radius: Defaults to #{tokens.$layer-bg-color};\n   * @prop --background: Defaults to #{tokens.$layer-bg-color};\n   * @prop --padding: padding of the drop down. Default to '10px 0';\n   * @prop --overflow: `nano-menu` with nested `nav-item` requires hidden overflow. This can be overidden;\n   * @prop --dropdown-z-index: Defaults to #{tokens.$layer-index-dropdown};\n   * @prop --min-width: Defaults to 0;\n   * @prop --box-shadow: #{tokens.$layer-shadow-large};\n   * @prop --max-menu-height: max height of a slotted menu. defaults to 50vh\n   */\n\n  --width: auto;\n  --border: #{tokens.$layer-border-style};\n  --border-radius: #{tokens.$layer-border-radius};\n  --background: #{tokens.$layer-bg-color};\n  --padding: 10px 0;\n  --overflow: auto;\n  --dropdown-z-index: #{tokens.$layer-index-dropdown};\n  --min-width: 0;\n  --box-shadow: #{tokens.$layer-shadow-large};\n  --menu-height: var(--max-menu-height, 50vh);\n\n  display: flex;\n}\n\n.dropdown {\n  position: relative;\n\n  &__trigger {\n    display: block;\n  }\n\n  &__positioner {\n    position: absolute;\n    z-index: var(--dropdown-z-index);\n    min-inline-size: var(--min-width);\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    @media (width <= 35.9375em) {\n      z-index: 100;\n    }\n  }\n\n  &__panel {\n    padding: var(--padding);\n    background: var(--background);\n    min-inline-size: var(--min-width);\n    inline-size: var(--width);\n    border: var(--border);\n    border-radius: var(--border-radius);\n    color: currentcolor;\n    box-shadow: var(--box-shadow);\n    opacity: 0;\n    transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;\n    min-block-size: 20px;\n    overflow: var(--overflow);\n    box-sizing: content-box !important;\n\n    &.loading {\n      overflow-y: hidden;\n    }\n\n    &.top {\n      transform: translateY(-20px) translateZ(0);\n    }\n\n    &.bottom {\n      transform: translateY(20px) translateZ(0);\n    }\n\n    .dropdown__positioner.popover-visible & {\n      opacity: 1;\n      transform: translateY(0) translateZ(0);\n    }\n\n    ::slotted(.nano-menu) {\n      max-block-size: var(--menu-height);\n    }\n  }\n\n  &__accessible-title {\n    @include mx.visually-hide();\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  Method,\n  Prop,\n  Watch,\n  Listen,\n  ComponentInterface,\n  EventEmitter,\n  Host,\n} from '@stencil/core';\nimport { getActiveElement } from '../../utils/active-element';\nimport Popover, { PopoverPlacement } from '../../utils/popover';\nimport { getNearestTabbableElement } from '../../utils/tabbable';\nimport { transformTag, h } from '../../utils/renderer';\nimport type { NavItemEventDetail } from '../nav-item/nav-item-interface';\n\nlet dropDownIds = 0;\n\n/**\n * Dropdowns show additional content in a panel.\n * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).\n * @slot trigger - The dropdown's trigger.\n * @slot - The dropdown's content.\n */\n@Component({\n  tag: 'nano-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface {\n  private dropdownId = `dropdown-${dropDownIds++}`;\n  private labelId = this.dropdownId + '-title';\n  private ignoreOpenWatcher = false;\n  private panel: HTMLElement;\n  private popover: Popover;\n  private trigger: HTMLElement;\n  private positioner: HTMLElement;\n  private accessibleTrigger: HTMLElement;\n  private didLoad = false;\n  private get menu() {\n    return this.host.querySelector<HTMLNanoMenuElement>(\n      transformTag('nano-menu')\n    );\n  }\n\n  @Element() host: HTMLNanoDropdownElement;\n\n  /** Determines if the dropdown should open automatically when the trigger is clicked */\n  @Prop() autoOpen = true;\n\n  /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.ignoreOpenWatcher) return;\n\n    if (this.open) this.show();\n    else this.hide();\n\n    if (this.accessibleTrigger) {\n      this.accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open.toString()\n      );\n      return;\n    }\n\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * Determines whether the dropdown should hide when a menu item is selected.\n   */\n  @Prop() closeOnSelect = true;\n\n  /**\n   * The dropdown will close when the user interacts outside of this element (e.g. clicking).\n   */\n  @Prop({ mutable: true }) containingElement: HTMLElement;\n\n  /**\n   * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\n   * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)\n   */\n  @Prop() tetherTo: HTMLElement = null;\n\n  @Watch('tetherTo')\n  handleTetherToChange() {\n    this.createPopover();\n    this.updateAccessibleTrigger();\n  }\n\n  /**\n   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\n   * inside of the viewport.\n   */\n  @Prop() placement: PopoverPlacement = 'bottom-start';\n\n  /**\n   * The distance in pixels from which to offset the panel away from its trigger.\n   */\n  @Prop() distance = 2;\n\n  /**\n   * The distance in pixels from which to offset the panel along its trigger.\n   */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  @Watch('placement')\n  @Watch('distance')\n  @Watch('skidding')\n  @Watch('hoist')\n  handlePopoverOptionsChange() {\n    if (!this.popover) return;\n\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      skidding: this.skidding,\n      distance: this.distance,\n    });\n  }\n\n  /**\n   * Title used to describe the dropdown content for accessibility\n   */\n  @Prop() dialogTitle!: string;\n\n  // Events\n\n  /**\n   * Emitted when the dropdown opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the dropdown opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the dropdown closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the dropdown closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // this is a massive hack to make stencil expose the `EventEmitter` type in the final build\n  // because the `Dropdown` class is used as a type in `nano-datalist`\n  /** @internal */\n  @Prop() eventType: EventEmitter;\n\n  // Listeners\n\n  @Listen('nanoOpen')\n  secondaryOpen(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n\n    this.panel.classList.add('loading');\n    this.panel.addEventListener(\n      'transitionend',\n      () => {\n        this.panel.classList.remove('loading');\n      },\n      { once: true }\n    );\n\n    this.panel.style.minHeight =\n      (ev.detail as NavItemEventDetail).secondaryMenu.scrollHeight + 'px';\n  }\n\n  @Listen('nanoClose')\n  secondaryClose(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n    if (!(ev.target as HTMLElement).parentElement) return;\n    this.panel.style.minHeight =\n      (ev.target as HTMLElement).parentElement.scrollHeight + 'px';\n  }\n\n  @Listen('nanoSelect')\n  handlePanelSelect(event: CustomEvent) {\n    const target = event.target as HTMLElement;\n\n    // Hide the dropdown when a menu item is selected\n    if (\n      this.closeOnSelect &&\n      target.tagName.toLowerCase() === transformTag('nano-menu')\n    )\n      this.hide();\n  }\n\n  // Methods\n\n  /** Shows the dropdown panel */\n  @Method()\n  async show() {\n    this.ignoreOpenWatcher = true;\n    this.open = true;\n\n    const nanoShow = this.nanoShow.emit();\n\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (typeof this.positioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.positioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n\n    this.ignoreOpenWatcher = false;\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  /** Hides the dropdown panel */\n  @Method()\n  async hide() {\n    this.ignoreOpenWatcher = true;\n    this.open = false;\n\n    const nanoHide = this.nanoHide.emit();\n\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      this.ignoreOpenWatcher = false;\n      return;\n    }\n\n    if (this.popover) this.popover.hide();\n    this.ignoreOpenWatcher = false;\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n    if (this.accessibleTrigger && this.focusEleInDropDwn()) {\n      this.accessibleTrigger.focus();\n    }\n\n    setTimeout(() => {\n      if (!this.open && typeof this.positioner?.hidePopover === 'function') {\n        this.positioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  /**\n   * Decides if the current active element or element\n   * connected to the current event is connected to the Dropdown\n   * @param e\n   * @returns whether the current focus is within the dropdown\n   */\n  private focusEleInDropDwn(e?: Event) {\n    const activeElement = getActiveElement();\n\n    if (e && e.composedPath()?.length) {\n      const ddInPath = e.composedPath().includes(this.containingElement);\n      if (ddInPath) return ddInPath;\n      return e.composedPath().includes(this.accessibleTrigger);\n    }\n\n    return (\n      activeElement &&\n      activeElement.closest(this.containingElement.tagName.toLowerCase()) ===\n        this.containingElement &&\n      activeElement !== this.accessibleTrigger\n    );\n  }\n\n  private togglePanel = () => {\n    if (!this.autoOpen) return;\n    if (this.open) this.hide();\n    else this.show();\n  };\n\n  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and\n  // `aria-expanded`. These must be applied to the \"accessible trigger\" (the tabbable portion of the trigger element\n  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,\n  private updateAccessibleTrigger() {\n    if (!this.didLoad) return;\n\n    let accessibleTrigger: HTMLElement;\n    this.accessibleTrigger = null;\n\n    if (!this.tetherTo) {\n      const assignedElements = Array.from(\n        this.host.querySelectorAll('[slot=\"trigger\"]')\n      );\n      accessibleTrigger = assignedElements.map(getNearestTabbableElement)[0];\n    } else {\n      accessibleTrigger = getNearestTabbableElement(this.tetherTo);\n    }\n\n    if (accessibleTrigger && !accessibleTrigger.getAttribute('aria-haspopup')) {\n      accessibleTrigger.setAttribute('aria-haspopup', 'true');\n      accessibleTrigger.setAttribute(\n        'aria-expanded',\n        this.open ? 'true' : 'false'\n      );\n      this.accessibleTrigger = accessibleTrigger;\n    }\n  }\n\n  // Handlers\n\n  private handleDocumentKeyDown(event: KeyboardEvent) {\n    // Close when escape is pressed\n    if (event.key === 'Escape') {\n      this.hide();\n      return;\n    }\n\n    // Close when tabbing results in the focus leaving the close element\n    if (event.key === 'Tab') {\n      setTimeout(() => {\n        if (\n          document.activeElement &&\n          document.activeElement.closest(\n            this.containingElement.tagName.toLowerCase()\n          ) !== this.containingElement\n        ) {\n          this.hide();\n          return;\n        }\n      });\n    }\n\n    // If a menu is present, focus on it when certain keys are pressed\n    if (this.menu && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n      // must have menu item, must have pressed down, must be open and must not have focus within dd\n      if (!this.open || this.focusEleInDropDwn(event)) return;\n      event.preventDefault();\n      this.menu.setFocus();\n      return;\n    }\n\n    // All other keys focus the menu and pass the event through to menu (necessary for type-to-search to work)\n    const ePath = event.composedPath();\n    if (this.menu && ePath.length && !ePath.find((el) => el !== this.menu)) {\n      this.menu.dispatchEvent(new KeyboardEvent(event.type, event));\n      return;\n    }\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    // Close when clicking outside of the close element\n    if (!this.focusEleInDropDwn(event)) {\n      this.hide();\n      return;\n    }\n  }\n\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\n    // Open the panel when pressing down or up while focused on the trigger\n    if (['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {\n      this.show();\n      event.preventDefault();\n      event.stopPropagation();\n\n      if (this.menu) this.menu.setFocus();\n    }\n  };\n\n  private handleTriggerSlotChange = () => {\n    this.updateAccessibleTrigger();\n  };\n\n  private createPopover() {\n    if ((!this.tetherTo && !this.trigger) || !this.positioner) return;\n\n    if (this.popover) {\n      if (this.open) this.hide();\n      this.popover.destroy();\n      this.popover = null;\n    }\n\n    this.popover = new Popover(this.tetherTo || this.trigger, this.positioner, {\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.panel,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n      onTransitionEnd: () => {\n        if (!this.open) {\n          this.panel.scrollTop = 0;\n        } else if (this.menu) {\n          this.menu.showActiveElement();\n        }\n      },\n    });\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  // Stencil hooks\n\n  connectedCallback() {\n    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);\n\n    if (!this.containingElement) this.containingElement = this.host;\n  }\n\n  componentDidLoad() {\n    this.didLoad = true;\n    this.createPopover();\n    setTimeout(() => this.updateAccessibleTrigger(), 100);\n  }\n\n  disconnectedCallback() {\n    if (this.host.isConnected) this.hide();\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-dropdown\">\n        <div\n          part=\"base\"\n          id={this.dropdownId}\n          class={{\n            dropdown: true,\n            'dropdown--open': this.open,\n          }}\n        >\n          <span\n            part=\"trigger\"\n            class=\"dropdown__trigger\"\n            ref={(el) => (this.trigger = el)}\n            onKeyDown={this.handleTriggerKeyDown}\n            onClick={this.togglePanel}\n          >\n            <slot name=\"trigger\" onSlotchange={this.handleTriggerSlotChange} />\n          </span>\n\n          <div\n            ref={(el) => (this.positioner = el)}\n            class=\"dropdown__positioner\"\n            popover=\"manual\"\n            id={this.dropdownId + '-positioner'}\n          >\n            <div\n              ref={(el) => (this.panel = el)}\n              part=\"panel\"\n              class={`dropdown__panel ${this.placement.split('-').join(' ')}`}\n              aria-hidden={!this.open}\n              role={\n                this.host.getAttribute('role') === 'group' ? 'group' : 'dialog'\n              }\n              aria-modal={\n                this.host.getAttribute('role') === 'group' ? undefined : 'true'\n              }\n              aria-labelledby={this.dialogTitle ? this.labelId : undefined}\n            >\n              {this.dialogTitle && (\n                <span\n                  id={this.labelId}\n                  class=\"dropdown__accessible-title\"\n                  aria-live={\n                    this.host.getAttribute('role') === 'group'\n                      ? undefined\n                      : 'polite'\n                  }\n                >\n                  {this.dialogTitle}\n                </span>\n              )}\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-field-validator.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FieldValidator","submitted","userForm","userFormChange","this","activeForm","_activeForm","form","removeEventListener","handleFormInvalid","addEventListener","mo","allFields","nanoFields","plainFields","nanoFieldSelector","hasSetStore","internalValidate","validateOn","validateOnChange","forEach","field","tagName","toLowerCase","transformTag","cbg","closest","scrollToInvalid","dirty","_dirty","valid","_valid","store","_store","payload","state","showValidation","validationState","async","found","find","v","name","getName","pf","nf","validationMessage","validityMessage","length","checkValidity","invalid","fields","f","push","value","extraFieldSelector","validation","setStore","Object","entries","key","val","setCustomValidity","validity","Promise","all","map","err","setFieldError","finally","scrollToFirstInvalid","resetValidity","force","setTimeout","invalidField","scrollIntoView","behavior","block","nanoPayloadChange","nanoSubmit","nanoInvalid","attachSlotObserver","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","filter","e","includes","storeToFields","fieldsToStore","emit","fieldName","type","cbs","cb","checked","isArray","ff","files","getValidityTarget","validityTarget","init","currentArr","fileStateEqual","JSON","stringify","validate","newVal","res","msg","validityState","validateAllFields","reduce","memo","undefined","showError","setError","submitForm","defaultPrevented","submit","handleStoreChange","handleFieldChange","ev","target","handlePlainFieldChange","preventDefault","handleSubmit","connectedCallback","createStore","componentDidLoad","requestAnimationFrame","on","disconnectedCallback","disconnect","reset","render","h","Host","class","ref"],"sources":["src/components/field-validator/field-validator.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport { h, transformTag } from '../../utils/renderer';\nimport type {\n  NanoFormEles,\n  NanoFormEvent,\n  PlainFormEles,\n  PlainFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n} from './field-validator-interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n  scoped: true,\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n  private hasSetStore = false;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n        const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n          transformTag('nano-checkbox-group')\n        );\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store(): ObservableMap<ValidatorValueStore> {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store?.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === this.getName(field));\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          // non-nano fields\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          // nano-... fields\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: this.getName(field),\n        value: this._store.state[this.getName(field)],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    this.hasSetStore = true;\n    Object.entries(state).forEach(([key, val]) => {\n      this.store.state[key] = val;\n    });\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs.\n   * Set as an empty string to clear the error.\n   * @param scrollToInvalid - whether to scroll to the first invalid field.\n   * If not present, will follow the value set on `scrollToInvalid` prop.\n   * @returns a promise, resolved when all errors are set\n   */\n  @Method()\n  async setCustomValidity(\n    validity: { [key: string]: string },\n    scrollToInvalid?: boolean\n  ) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => this.getName(f) === key);\n        if (field) await this.setFieldError(field, err);\n      })\n    ).finally(() => {\n      this.scrollToFirstInvalid(scrollToInvalid);\n    });\n  }\n\n  /**\n   * Clear all custom validation.\n   * @returns a promise, resolved when all errors are cleared\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /**\n   * Scrolls to first invalid form field.\n   * @param force - forces the scroll behaviour (default). Otherwise will use the default set in `scrollToInvalid` prop\n   */\n  @Method()\n  async scrollToFirstInvalid(force = true) {\n    if (!force && !this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /**\n   * During spec tests, mockelement props aren't set - only attributes.\n   * This irons out that kink\n   * @param field\n   * @returns the fields name prop or attr\n   */\n  private getName(field: PlainFormEles | NanoFormEles) {\n    return field.name || field.getAttribute('name');\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n    plainFields = plainFields.filter(\n      (f) => !!this.getName(f) && !!this.getName(f).length\n    );\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields, true);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cbs = this.allFields.filter(\n          (f) => this.getName(field) === this.getName(f)\n        ) as HTMLNanoCheckboxElement[];\n        if (\n          cbs[0].type === 'radio' ||\n          cbs[0].type === 'segment' ||\n          cbs[0].type === 'segment-pill'\n        ) {\n          // single radio type control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName]?.includes(cb.value))\n              cb.checked = true;\n            else cb.checked = false;\n          });\n        } else {\n          // single checkbox like control\n          cbs.forEach((cb) => {\n            if (this._store.state[fieldName] === cb.value) cb.checked = true;\n            else cb.checked = false;\n          });\n        }\n        return;\n      }\n\n      if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  private getValidityTarget(\n    field: PlainFormEles | NanoFormEles | HTMLNanoCheckboxGroupElement\n  ) {\n    let validityTarget = field;\n\n    if (field.tagName.toLowerCase() === transformTag('nano-checkbox')) {\n      // if we have a checkbox-group, set the validation message there\n      const cbg = field.closest<HTMLNanoCheckboxGroupElement>(\n        transformTag('nano-checkbox-group')\n      );\n      validityTarget = cbg || field;\n    }\n\n    return validityTarget;\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(\n    fields: Array<NanoFormEles | PlainFormEles>,\n    init = false\n  ) {\n    fields.forEach((field) => {\n      const fieldName = this.getName(field);\n      if (!fieldName.length) return;\n\n      if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n        // a new field is being added\n        // but we already have a value for it\n        // via a store that has been actively set\n        // so let's not overwrite it\n        return;\n      }\n\n      if (\n        field.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        const cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              this.getName(f) === fieldName &&\n              (f.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName]?.includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName.toLowerCase() === transformTag('nano-file-upload')) {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([msg, validityState]) => {\n        return validityState.fields.map(async (fieldName) => {\n          // switch on/off validation messages\n          const field = this.allFields.find(\n            (f) => this.getName(f) === fieldName\n          );\n          const validityTarget = this.getValidityTarget(field);\n\n          if (\n            ((validityTarget as NanoFormEles).validityMessage ||\n              (validityTarget as PlainFormEles).validationMessage) === msg &&\n            validityState.valid\n          ) {\n            // status is now valid - clear the error\n            await this.setFieldError(validityTarget, '');\n          } else if (!validityState.valid) {\n            // status is invalid. Set the error\n            await this.setFieldError(validityTarget, msg);\n          }\n        });\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    const validityTarget = this.getValidityTarget(field);\n\n    if (validityTarget['showError']) {\n      await (\n        validityTarget as Exclude<NanoFormEles, HTMLNanoCheckboxElement>\n      ).showError(msg);\n    } else if (validityTarget['setError'])\n      await (validityTarget as HTMLNanoCheckboxElement).setError(msg);\n    else (validityTarget as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => this.getName(field) === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      found &&\n      (found.tagName.toLowerCase() === transformTag('nano-checkbox') ||\n        ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n    ) {\n      // it's a cb - always change.\n      this.storeToFields([found]);\n    } else if (\n      found &&\n      ((found.tagName.toLowerCase() === transformTag('nano-file-upload') &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n        (found.tagName.toLowerCase() !== transformTag('nano-file-upload') &&\n          found.value !== newVal))\n    ) {\n      // not a cb. Only change if value is different\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  @Listen('nanoChange')\n  handleFieldChange(ev: NanoFormEvent) {\n    if (!this.nanoFields?.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  }\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  @Listen('input')\n  @Listen('change')\n  handlePlainFieldChange(ev: PlainFormEvent) {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  }\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid(false);\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  @Listen('submit')\n  async handleSubmit(e: Event) {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid(false);\n      return;\n    }\n    this.submitForm();\n  }\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-field-validator\">\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-file-upload.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileUploadCss","NanoFileUploadStyle0","fileInputIds","getDataTransfer","DataTransfer","ClipboardEvent","clipboardData","FileUpload","inputEl","publicInputEl","mo","fileInputId","canChangeFileList","removeFiles","hasHelperSlot","hasLabelSlot","errorMessage","isDragging","fileList","fileListChange","this","value","files","arrToFileList","map","file","setTimeout","nanoChange","emit","hasFocus","name","accept","capture","maxFileSize","maxFiles","label","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","form","shouldValidate","validate","requestAnimationFrame","showInlineValidation","_invalid","invalid","validityMessage","validationMessage","Array","from","objectURL","URL","createObjectURL","fs","addNewFiles","val","nanoFocus","nanoBlur","nanoValidate","reportValidity","validateFirst","isValid","setFocus","focus","getInputElement","Promise","resolve","showError","message","setCustomValidity","globalClickHandler","e","composedPath","every","node","host","onBlur","globalKeydownHandler","key","target","onReset","document","querySelector","closest","onClearClick","onFocus","i","len","length","items","add","checkFileSize","size","checkFileType","type","match","error","validity","valid","forEach","fileItem","ev","originalEvent","slotChangeObserver","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","location","newFiles","filter","findFile","find","onInvalid","preventDefault","onFileChoose","onFileRemoveFileClick","push","classList","remove","onFileRemoveAnim","rmFile","f","revokeObjectURL","console","onInputChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","disconnectedCallback","componentDidLoad","componentWillLoad","FileUploadInput","eleType","listId","labelId","moreId","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","tabindex","onClick","multiple","undefined","ref","input","onChange","tabIndex","button","dropArea","onAnimationEnd","_","content","placement","iconName","href","render","Host"],"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --invalid-msg-color: Default value #{tokens.nano-color(danger, base)};\n   * @prop --invalid-msg-font-size: Default value #{tokens.$input-help-font-size};\n\n   * @prop --help-msg-color: Default value #{tokens.$input-help-color};\n\n   * @prop --label-color: Default value #{tokens.$label-color};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n   * @prop --label-font-size: Default value #{tokens.$label-font-size};\n   * @prop --label-padding: Default value #{tokens.$input-padding-bottom};\n   * @prop --label-color--invalid: Default value #{tokens.$label-color-invalid};\n\n   * @prop --drop-bg: Default value #{map.get(tokens.$colors, blue--faded)};\n   * @prop --drop-text: Default value #{map.get(tokens.$colors, dimgrey)};\n   * @prop --drop-height: Default value 3.5em;\n   * @prop --drop-border-tint: Default value #{tokens.nano-color(primary, base, null, true)};\n   * @prop --drop-border-width: Default value 2px;\n   * @prop --drop-border-radius: Default value 5px;\n   * @prop --drop-bg--invalid: Default value #{tokens.$input-background-color--invalid};\n   * @prop --drop-border--invalid: Default value #{tokens.nano-color(danger, base, null, true)};\n\n   * @prop --btn-bg: Default value #{tokens.nano-color(primary, base)};\n   * @prop --btn-text: Default value #{tokens.nano-color(primary, contrast)};\n   * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n   * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n   * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n   * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n   * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n   */\n\n  min-block-size: 1rem;\n  display: block;\n\n  --invalid-msg-color: #{tokens.nano-color(danger, base)};\n  --invalid-msg-font-size: #{tokens.$input-help-font-size};\n  --help-msg-color: #{tokens.$input-help-color};\n  --label-color: #{tokens.$label-color};\n  --label-font-size: #{tokens.$label-font-size};\n  --label-padding: #{tokens.$input-padding-bottom};\n  --label-color--invalid: #{tokens.$label-color-invalid};\n  --drop-bg: #{map.get(tokens.$colors, blue--faded)};\n  --drop-text: #{darken(map.get(tokens.$colors, dimgrey), 11%)};\n  --drop-height: 3.5em;\n  --drop-border-tint: #{tokens.nano-color(primary, base, null, true)};\n  --drop-border-width: 2px;\n  --drop-border-radius: 5px;\n  --drop-bg--invalid: #{tokens.$input-background-color--invalid};\n  --drop-border--invalid: #{tokens.nano-color(danger, base, null, true)};\n  --btn-bg: #{tokens.nano-color(primary, base)};\n  --btn-text: #{tokens.nano-color(primary, contrast)};\n  --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n  --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n  --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n  --btn-padding-start: var(--nano-btn-padding-start, 1rem);\n  --btn-padding-end: var(--nano-btn-padding-end, 1rem);\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\n.file-upload {\n  $self: &;\n\n  /* Common */\n\n  &__label {\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  &__input {\n    @include mx.visually-hide();\n  }\n\n  &__error,\n  &__help,\n  &__more,\n  &__label {\n    display: block;\n    inline-size: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  &__more {\n    block-size: 1em;\n    margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n    margin-inline: 3px 0;\n    position: relative;\n  }\n\n  &__error,\n  &__help {\n    inset-block-start: 0;\n    inset-inline-start: 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    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__error {\n    color: var(--invalid-msg-color);\n    opacity: 0;\n\n    .file-upload--invalid & {\n      opacity: 1;\n    }\n  }\n\n  &__help {\n    font-style: italic;\n    opacity: 1;\n    color: var(--help-msg-color);\n\n    .file-upload--invalid & {\n      opacity: 0;\n    }\n  }\n\n  /* Drop area / Multi file upload */\n\n  &__drop {\n    position: relative;\n    inline-size: 100%;\n    display: inline-block;\n  }\n\n  &__drop-area {\n    flex-direction: column;\n    background-color: var(--drop-bg);\n    color: var(--drop-text);\n    min-block-size: var(--drop-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.9em;\n    position: relative;\n    transition: background-color 0.15s ease-in-out;\n    padding: 0.5rem;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.7;\n    }\n\n    .file-upload--invalid & {\n      background-color: var(--drop-bg--invalid);\n    }\n\n    .file-upload--dragging & {\n      background-color: #{map.get(tokens.$colors, white)};\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: var(--drop-border-radius);\n      border-width: var(--drop-border-width);\n      border-color: rgb(var(--drop-border-tint) / 50%);\n      border-style: dashed;\n      inset: 0;\n      transition:\n        top 0.1s ease-in-out,\n        bottom 0.1s ease-in-out,\n        left 0.1s ease-in-out,\n        right 0.1s ease-in-out;\n\n      .file-upload--invalid & {\n        border-color: rgb(var(--drop-border--invalid) / 100%);\n      }\n\n      .file-upload--dragging & {\n        inset: 5px;\n      }\n    }\n\n    span {\n      color: rgb(var(--drop-border-tint) / 100%);\n      text-decoration: underline;\n      border-radius: 2px;\n      z-index: 1;\n      cursor: pointer;\n      position: relative;\n\n      .file-upload--focus & {\n        box-shadow: #{tokens.$control-focus-style};\n      }\n    }\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n\n    &-wrap {\n      position: relative;\n      inset-block-start: -4px;\n    }\n\n    &-item {\n      inline-size: 100%;\n      margin: 0 0 2px;\n      display: flex;\n      align-items: center;\n      transform: translateZ(0);\n      animation: hideListItem 0.3s ease-in-out forwards;\n\n      @keyframes hideListItem {\n        0% {\n          opacity: 1;\n          transform: translateY(0);\n          transform: translateZ(0);\n        }\n\n        100% {\n          opacity: 0;\n          transform: translateY(10px);\n          transform: translateZ(0);\n        }\n      }\n\n      &--active {\n        animation: showListItem 0.3s ease-in-out forwards;\n\n        @keyframes showListItem {\n          0% {\n            opacity: 0;\n            transform: translateY(10px);\n            transform: translateZ(0);\n          }\n\n          100% {\n            opacity: 1;\n            transform: translateY(0);\n            transform: translateZ(0);\n          }\n        }\n      }\n    }\n\n    .list-title {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      padding: 5px;\n      margin-inline-end: 2px;\n      display: block;\n      inline-size: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      font-size: 0.9em;\n      color: var(--help-msg-color);\n    }\n\n    .list-button {\n      background: var(--nano-color-blue--faded);\n      border-radius: 5px;\n      margin: 2px;\n    }\n\n    .list-error {\n      --color: rgb(var(--drop-border--invalid) / 100%);\n    }\n  }\n\n  /* Button display / Single file upload */\n\n  &__button {\n    @include tokens.button-base;\n    @include tokens.button-standard(\n      var(--btn-bg),\n      var(--btn-text),\n      #{tokens.nano-color(primary, shade)}\n    );\n\n    --nano-btn-icon-size: var(--btn-icon-size);\n    --nano-btn-line-height: var(--btn-icon-size);\n    --nano-btn-padding-top: var(--btn-padding-top);\n    --nano-btn-padding-bottom: var(--btn-padding-bottom);\n    --nano-btn-padding-start: var(--btn-padding-start);\n    --nano-btn-padding-end: var(--btn-padding-end);\n\n    max-inline-size: 100%;\n    font-size: 0.9em;\n\n    :host([disabled]:not([disabled='false'])) & {\n      opacity: 0.4;\n    }\n\n    .file-upload--dragging & {\n      --nano-btn-border-style: dashed;\n    }\n    #{$self}__clear-btn {\n      margin: 0;\n      font-size: inherit;\n      padding: 0;\n      border: 0;\n      outline: none;\n      background-color: transparent;\n      display: flex;\n      align-items: stretch;\n      inline-size: auto;\n      color: var(--clear-btn-color);\n\n      :host(.is-invalid) & {\n        color: var(--clear-btn-color--invalid);\n      }\n\n      .nano-icon {\n        margin-inline: 0.4rem 0;\n        margin-block: 0;\n      }\n    }\n    #{$self}__btn-content {\n      display: flex;\n      align-items: center;\n\n      span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        min-inline-size: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  VNode,\n  Method,\n  Listen,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport {\n  FileInputChangeEventDetail,\n  FileWithUrl,\n} from './file-upload-interface';\nimport type {\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../types/shared';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n  getDataTransfer();\n} catch {\n  try {\n    getDataTransfer = () => new ClipboardEvent('').clipboardData;\n    getDataTransfer();\n  } catch {\n    getDataTransfer = null;\n  }\n}\n\ninterface FileValidation {\n  file: File;\n  valid: boolean;\n  validationMessage?: string;\n  location?: string;\n}\n/**\n * A better UI experience for `input type=\"file\"` form controls.\n *\n *   - Drag and Drop\n *   - Validation options\n *   - Preview and manage multiple files\n */\n@Component({\n  tag: 'nano-file-upload',\n  styleUrl: 'file-upload.scss',\n  scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n  private inputEl: HTMLInputElement;\n  private publicInputEl: HTMLInputElement;\n  private mo!: MutationObserver;\n  private fileInputId = `nano-file-upload-${fileInputIds++}`;\n  private canChangeFileList = !!getDataTransfer;\n  private removeFiles: FileValidation[] = [];\n\n  @State() hasHelperSlot: boolean;\n  @State() hasLabelSlot: boolean;\n  @State() errorMessage: string = '';\n  @State() isDragging = false;\n  @State() fileList: FileValidation[] = [];\n  @Watch('fileList')\n  fileListChange() {\n    if (this.canChangeFileList) {\n      this.publicInputEl.value = '';\n      this.inputEl.files = this.arrToFileList(\n        this.fileList.map((file) => file.file)\n      );\n      setTimeout(() => {\n        this.nanoChange.emit({ value: this.value, files: this.files });\n      }, 20);\n    }\n  }\n  @State() hasFocus: boolean;\n\n  @Element() host: HTMLNanoFileUploadElement;\n\n  // public props\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair. */\n  @Prop() name!: string;\n\n  /** The accept attribute value is a string that defines the file types the file input should accept.\n   * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` */\n  @Prop() accept?: string;\n\n  /** Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n   * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n   * the user agent may fall back to its preferred default mode. */\n  @Prop() capture?: 'user' | 'environment';\n\n  /** The maximum file size allowed per file (Megabytes) */\n  @Prop() maxFileSize: number = 1;\n\n  /** The maximum file size allowed per file (bytes).  */\n  @Prop() maxFiles: number = 1;\n\n  /** String to place within a label element. */\n  @Prop() label!: string;\n\n  /** Placeholder only used within single file uploads. */\n  @Prop() placeholder: string = 'Choose a file...';\n\n  /** Visually hide the label - but make it accessible. */\n  @Prop() hideLabel?: boolean = false;\n\n  /** If `true`, the user must select a file to upload before submitting a form. */\n  @Prop() required = false;\n\n  /** If `true`, the user cannot interact with the select. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If `true`, a clear icon will appear in the input when there is a value.\n   * Clicking it clears the input. Only used within single file uploads. */\n  @Prop() clearInput = false;\n\n  /** Whether to show validation errors underneath input */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /** When should the field perform validation */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /** The form element to associate with this input (its form owner). Must be the id of a form. */\n  @Prop() form?: string | null;\n\n  @Watch('maxFiles')\n  @Watch('maxFileSize')\n  @Watch('capture')\n  @Watch('accept')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('fileList')\n  protected shouldValidate() {\n    if (!this.inputEl) return;\n\n    this.validate();\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.showInlineValidation();\n    });\n  }\n\n  @State() _invalid = false;\n  /** This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.inputEl) return '';\n    return this.inputEl.validationMessage;\n  }\n\n  /** A File array that lists every selected file.\n   * Has an added `objectURL` property returning a `DOMString`\n   * containing an object URL that can be used to reference the contents of the specified source\n   * This list has no more than one member unless the multiple attribute is specified */\n  @Prop()\n  get files(): FileWithUrl[] {\n    return this.inputEl\n      ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n          file.objectURL = URL.createObjectURL(file);\n          return file;\n        })\n      : [];\n  }\n  set files(fs: FileWithUrl[]) {\n    this.addNewFiles(this.arrToFileList(fs));\n  }\n\n  /** A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n   * If the user selected multiple files, the value represents the first file in the list of files they selected.\n   * You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''` */\n  @Prop()\n  get value() {\n    return this.inputEl ? this.inputEl.value : '';\n  }\n  set value(val: string) {\n    if (val === '' && this.inputEl) {\n      this.fileList = [];\n      this.inputEl.value = '';\n    }\n  }\n\n  // Events\n\n  /** Emitted when the value has changed. */\n  @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n  /** Emited when the checkbox is focused */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emited when the checkbox is blurred */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public methods\n\n  /** Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }` */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.validate();\n      this.showInlineValidation();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.inputEl.validationMessage,\n    };\n  }\n\n  /** Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`. */\n  @Method()\n  async setFocus() {\n    if (this.inputEl) this.inputEl.focus();\n  }\n\n  /** @returns the native `<input>` element used under the hood */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.inputEl);\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   * @param message */\n  @Method()\n  async showError(message: string) {\n    if (this.inputEl) {\n      this.inputEl.setCustomValidity(message);\n      this.validate();\n      this.showInlineValidation();\n    }\n  }\n\n  // Listeners\n\n  @Listen('click', { target: 'window' })\n  globalClickHandler(e: Event) {\n    if (!this.hasFocus) return;\n    if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n  }\n\n  @Listen('keydown', { target: 'window' })\n  globalKeydownHandler(e: KeyboardEvent) {\n    if (!this.hasFocus || e.key !== 'Tab') return;\n    if (e.target !== this.inputEl) this.onBlur();\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.host.closest('form');\n    if (!form || e.target !== this.host.closest('form')) return;\n\n    this.value = '';\n  }\n\n  // Private methods\n\n  private onClearClick = () => {\n    this.value = '';\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.validate();\n    if (this.validateOn === 'dirty') this.showInlineValidation();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private arrToFileList(files: File[]): FileList {\n    const fileList = getDataTransfer();\n    for (let i = 0, len = files.length; i < len; i++)\n      fileList.items.add(files[i]);\n    return fileList.files;\n  }\n\n  private checkFileSize(size: number): boolean {\n    return size / 1000000 <= this.maxFileSize;\n  }\n\n  private checkFileType(type: string): boolean {\n    if (!this.accept) return true;\n    return this.accept.match(type) && this.accept.match(type).length > 0;\n  }\n\n  private validate = () => {\n    this.errorMessage = '';\n    this.inputEl.setCustomValidity('');\n    let error: string;\n\n    if (!this.inputEl.validity.valid) {\n      error = this.inputEl.validationMessage;\n    } else {\n      this.fileList.forEach((fileItem) => {\n        error = null;\n        if (!this.checkFileSize(fileItem.file.size)) {\n          error =\n            'Maximum file size exceeded. Max file size is ' +\n            this.maxFileSize +\n            'Mb';\n        } else if (!this.checkFileType(fileItem.file.type))\n          error = `File type is not allowed (${this.accept})`;\n\n        fileItem.validationMessage = error;\n        fileItem.valid = !error;\n      });\n      if (this.fileList.length > this.maxFiles)\n        error = `Maxinum number of files exceeded (${this.maxFiles})`;\n    }\n\n    if (error) this.inputEl.setCustomValidity(error);\n  };\n\n  private showInlineValidation(ev?: Event) {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.errorMessage = '';\n\n    if (!this.inputEl.validity.valid) {\n      this.errorMessage = this.inputEl.validationMessage;\n      this._invalid = true;\n    }\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.inputEl.validationMessage,\n      originalEvent: ev,\n    });\n  }\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have slot content\n    this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n  }\n\n  private addNewFiles(files: FileList) {\n    const fileList: FileValidation[] = Array.from(files).map((file) => {\n      return {\n        file: file,\n        location: URL.createObjectURL(file),\n        valid: true,\n        validationMessage: null,\n      };\n    });\n\n    // if we have a list and we're in a browser that can amend files\n    // append files to the list, otherwise replace\n    if (this.canChangeFileList && this.maxFiles > 1) {\n      const newFiles = fileList.filter(\n        (findFile) =>\n          !this.fileList.find((file) => file.file.name === findFile.file.name)\n      );\n      this.fileList = [...this.fileList, ...newFiles];\n    } else this.fileList = fileList;\n  }\n\n  // event handlers & hooks\n\n  private onInvalid = (ev: Event) => {\n    if (this.showInlineError) ev.preventDefault();\n    this.validate();\n    this.showInlineValidation(ev);\n  };\n\n  private onFileChoose = (e: Event) => {\n    const files = (e.target as HTMLInputElement).files;\n    if (files && files.length)\n      this.addNewFiles((e.target as HTMLInputElement).files);\n  };\n\n  private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n    if (!this.canChangeFileList) return;\n    this.removeFiles.push(file);\n\n    (e.target as HTMLElement)\n      .closest('.file-upload__list-item--active')\n      .classList.remove('file-upload__list-item--active');\n  };\n\n  private onFileRemoveAnim = () => {\n    if (!this.canChangeFileList || !this.removeFiles.length) return;\n    this.fileList = this.fileList.filter(\n      (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n    );\n    try {\n      this.removeFiles.forEach((f) =>\n        f.location ? URL.revokeObjectURL(f.location) : ''\n      );\n    } catch (e) {\n      console.error(e);\n    }\n    this.removeFiles = [];\n  };\n\n  private onInputChange = () => {\n    this.nanoChange.emit({ value: this.value, files: this.files });\n  };\n\n  private onDragStop = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = false;\n  };\n\n  private onDragStart = (e: DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n  };\n\n  private onDrop = (e: DragEvent) => {\n    this.onDragStop(e);\n    if (e.dataTransfer.files && e.dataTransfer.files.length)\n      this.addNewFiles(e.dataTransfer.files);\n  };\n\n  // Component lifecycle\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private FileUploadInput = (\n    eleType: 'drop' | 'btn',\n    listId?: string\n  ): VNode[] => {\n    const labelId = this.fileInputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.fileInputId + '-more'\n        : '';\n\n    return [\n      <div class={'file-upload__' + eleType + '-wrap'}>\n        <label\n          class={`file-upload__` + eleType}\n          htmlFor={this.fileInputId}\n          id={labelId}\n          onDrop={(e) => {\n            this.onDrop(e);\n            this.onDragStop(e);\n          }}\n          onDragEnd={this.onDragStop}\n          onDragLeave={this.onDragStop}\n          onDragEnter={this.onDragStart}\n          onDragOver={this.onDragStart}\n        >\n          {(!!this.label || (this.hasLabelSlot && eleType !== 'drop')) && (\n            <div\n              class={`file-upload__label ${\n                this.hideLabel ? 'visually-hide' : ''\n              }`}\n            >\n              {!!this.label && !!this.label.length ? this.label : ''}\n              {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n                <slot name=\"label\" />\n              )}\n            </div>\n          )}\n          {eleType === 'drop' && (\n            <div class=\"file-upload__drop-area\">\n              <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n              <div>\n                Drag and drop or&nbsp;<span>browse</span>\n              </div>\n            </div>\n          )}\n          {eleType === 'btn' && (\n            <div\n              class={`file-upload__button button--keyline button--icon-start ${\n                this.hasFocus ? 'button--focus' : ''\n              }`}\n            >\n              <div class={`file-upload__btn-content`}>\n                <nano-icon name=\"regular/cloud-arrow-up\" />\n                <span>\n                  {this.fileList.length\n                    ? this.fileList[0].file.name\n                    : this.placeholder}\n                </span>\n                {!!this.value && this.clearInput && !this.disabled && (\n                  <button\n                    type=\"button\"\n                    class=\"icon file-upload__clear-btn\"\n                    tabindex=\"-1\"\n                    onClick={this.onClearClick}\n                  >\n                    <nano-icon name=\"light/xmark\"></nano-icon>\n                  </button>\n                )}\n              </div>\n            </div>\n          )}\n          <input\n            aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n            type=\"file\"\n            id={this.fileInputId}\n            accept={this.accept}\n            class=\"file-upload__input\"\n            multiple={this.maxFiles > 1}\n            disabled={this.disabled}\n            name={this.canChangeFileList ? undefined : this.name}\n            form={this.form}\n            ref={(input) => {\n              if (this.canChangeFileList) {\n                this.publicInputEl = input;\n                return;\n              }\n              this.inputEl = input;\n            }}\n            onChange={this.onFileChoose}\n            onFocus={this.onFocus}\n            onReset={this.onInputChange}\n          />\n        </label>\n        <input\n          name={!this.canChangeFileList ? undefined : this.name}\n          form={this.form}\n          ref={(input) => {\n            if (!this.canChangeFileList) return;\n            this.inputEl = input;\n          }}\n          type=\"file\"\n          id={this.fileInputId + '-hidden'}\n          tabIndex={-1}\n          multiple\n          class=\"file-upload__input\"\n          disabled={this.disabled}\n          required={this.required}\n          accept={this.accept}\n          onInvalid={this.onInvalid}\n          onChange={this.onInputChange}\n        />\n      </div>,\n      this.showInlineError || this.hasHelperSlot ? (\n        <div class=\"file-upload__more\" id={moreId}>\n          {this.showInlineError && !!this.errorMessage.length ? (\n            <div class=\"file-upload__error\">{this.errorMessage}</div>\n          ) : (\n            ''\n          )}\n          <div class=\"file-upload__help\">\n            <slot name=\"helper\" />\n          </div>\n        </div>\n      ) : (\n        ''\n      ),\n    ];\n  };\n\n  private button = (): VNode[] => {\n    return this.FileUploadInput('btn');\n  };\n\n  private dropArea = (): VNode[] => {\n    const listId = this.fileInputId + '-list';\n    return [\n      this.FileUploadInput('drop', listId),\n      <output class=\"file-upload__list-wrap\" id={listId}>\n        {!!this.fileList && this.fileList.length > 0 && (\n          <ul class=\"file-upload__list list\">\n            {this.fileList.map((file) => {\n              return (\n                <li\n                  key={file.file.name}\n                  class=\"file-upload__list-item file-upload__list-item--active list-item\"\n                  onAnimationEnd={(_) => this.onFileRemoveAnim()}\n                >\n                  <span class=\"list-title\">{file.file.name}</span>\n                  {!file.valid && (\n                    <nano-tooltip\n                      content={file.validationMessage}\n                      placement=\"left\"\n                    >\n                      <nano-icon-button\n                        class=\"list-button list-error\"\n                        iconName=\"light/triangle-exclamation\"\n                        label=\"File error\"\n                      />\n                    </nano-tooltip>\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      class=\"list-button list-button--view\"\n                      type=\"button\"\n                      iconName=\"light/eye\"\n                      label=\"View file\"\n                      target=\"_blank\"\n                      href={file.location}\n                    />\n                  )}\n                  {this.canChangeFileList && (\n                    <nano-icon-button\n                      onClick={(e) => this.onFileRemoveFileClick(e, file)}\n                      class=\"list-button list-button--remove\"\n                      iconName=\"light/xmark\"\n                      label=\"Remove file\"\n                    />\n                  )}\n                </li>\n              );\n            })}\n          </ul>\n        )}\n      </output>,\n    ];\n  };\n\n  render() {\n    return (\n      <Host class=\"nano-file-upload\">\n        <div\n          class={{\n            'file-upload': true,\n            'file-upload--dragging': this.isDragging,\n            'file-upload--focus': this.hasFocus,\n            'file-upload--invalid': this._invalid,\n          }}\n        >\n          {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}