@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

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

@@ -1 +0,0 @@
-{"file":"nano-details.entry.js","mappings":"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","names":[],"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.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 --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --transition-duration: Time it takes to slide down and show content. Defaults to .2s;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{tokens.$control-focus-style}\n  */\n\n  @include mx.text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --content-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get(tokens.$colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --transition-duration: 0.2s;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{tokens.$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n.header {\n  block-size: auto;\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  line-height: 1;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n  cursor: pointer;\n\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  &:hover {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .disabled & {\n    cursor: not-allowed;\n  }\n\n  .label {\n    inline-size: 100%;\n    max-inline-size: 100%;\n    max-block-size: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentcolor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--btn-padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--btn-padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(.nano-icon) {\n      --color: currentcolor;\n    }\n  }\n}\n\n.body {\n  overflow: hidden;\n  transition: height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;\n  outline: none;\n\n  > * {\n    .is-hidden & {\n      animation: fade .1s ease reverse;\n    }\n\n    .open & {\n      animation: fade var(--transition-duration, 0.3s) ease forwards;\n    }\n  }\n}\n\n.content {\n  padding: var(--content-padding);\n}\n\n@keyframes fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n  Watch,\n  Build,\n  Host,\n} from '@stencil/core';\nimport { displayTransition } from '../../utils/transitions';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n *\n * @part base - the root `details` element\n * @part header - the main `summary` ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part body - the wrapper around content\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private mo?: MutationObserver;\n  private stateChanging: boolean = false;\n  private bodyEl: HTMLElement;\n  private detailsEl: HTMLDetailsElement;\n  private headerEl: HTMLElement;\n  private contentEl: HTMLDivElement;\n  private cacheHeight: number;\n\n  @Element() private host: HTMLNanoDetailsElement;\n\n  /** Summary / handle text. Use the `label` slot for HTML markup */\n  @Prop() label: string = '';\n\n  /** Should item be open on load */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Disables the details so it can't be toggled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide the handle. (You will need to control the hiding / showing of content with script) */\n  @Prop() noHandle: boolean = false;\n\n  /** Icon slot rotation amount (degrees) on open */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\n   * Set `useCacheHeight` to `true` try to keep animations smooth. */\n  @Prop() useCacheHeight = false;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event() nanoAfterOpened: EventEmitter;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event() nanoAfterClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (e: KeyboardEvent) => {\n    if (this.stateChanging || this.disabled) return;\n\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this.open = !this.open;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.open = false;\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.open = true;\n        break;\n    }\n  };\n\n  private onMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    this.headerEl.focus();\n\n    if (this.stateChanging || this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    const nanoClose = this.nanoClosed.emit(this.open);\n\n    if (nanoClose.defaultPrevented) {\n      this.open = true;\n      this.detailsEl.open = true;\n      return;\n    }\n\n    this.cacheHeight = this.contentEl.scrollHeight;\n    this.bodyEl.style.height = this.cacheHeight + 'px';\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: false,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.detailsEl.open = false;\n      this.bodyEl.classList.add('is-hidden');\n      this.nanoAfterClosed.emit();\n    });\n\n    // requestAnimationFrame doesn't trigger transitionend event for firefox :/\n    setTimeout(() => {\n      this.bodyEl.style.height = '0px';\n    });\n  }\n\n  private show() {\n    const nanoOpen = this.nanoOpened.emit();\n    this.detailsEl.open = true;\n\n    if (nanoOpen.defaultPrevented) {\n      this.open = false;\n      this.detailsEl.open = false;\n      return;\n    }\n\n    displayTransition(this.bodyEl, {\n      className: 'is-shown',\n      show: true,\n      transitionProp: ['height'],\n    }).then(() => {\n      this.stateChanging = false;\n      this.bodyEl.style.height = 'auto';\n      this.nanoAfterOpened.emit();\n    });\n\n    this.bodyEl.style.height =\n      (this.useCacheHeight && this.cacheHeight\n        ? this.cacheHeight\n        : this.contentEl.scrollHeight) + 'px';\n  }\n\n  private attachMo() {\n    if (this.mo || !this.detailsEl || !Build.isBrowser) return;\n\n    this.mo = new MutationObserver((changes) => {\n      if (this.stateChanging) return;\n\n      for (const change of changes) {\n        if (change.type === 'attributes' && change.attributeName === 'open') {\n          this.open = this.detailsEl.open;\n        }\n      }\n    });\n    this.mo.observe(this.detailsEl, { attributes: true });\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.host.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.host.querySelector('[slot=\"icon-end\"]');\n  }\n\n  componentDidLoad() {\n    this.bodyEl.style.height = this.open ? 'auto' : '0';\n    if (this.open) this.detailsEl.setAttribute('open', 'true');\n    this.attachMo();\n  }\n\n  connectedCallback() {\n    this.attachMo();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) {\n      this.mo.disconnect();\n      this.mo = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-details\">\n        <details\n          part=\"base\"\n          ref={(d: HTMLDetailsElement) => (this.detailsEl = d)}\n          class={{\n            details: true,\n            open: this.open,\n            disabled: this.disabled,\n          }}\n        >\n          <summary\n            part=\"header\"\n            aria-controls=\"content\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            tabindex={this.disabled ? '-1' : '0'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            id=\"header\"\n            role=\"button\"\n            class=\"header\"\n            ref={(s) => (this.headerEl = s)}\n            onKeyDown={this.onKeyDown}\n            onClick={this.onMouseDown}\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div part=\"label\" class=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </summary>\n          <div\n            part=\"body\"\n            class=\"body\"\n            ref={(div) => (this.bodyEl = div)}\n            tabindex=\"-1\"\n            role=\"region\"\n            aria-labelledby=\"header\"\n          >\n            <div\n              part=\"content\"\n              ref={(div) => (this.contentEl = div)}\n              class=\"content\"\n              id=\"content\"\n            >\n              <slot />\n            </div>\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"nano-dialog.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,285 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
-import { h } from './renderer-4bc3e2dc.js';
-import { M as Modal } from './modal-02828a39.js';
-import { l as lockBodyScrolling, u as unlockBodyScrolling } from './scroll-1afc6a4e.js';
-import { h as hasSlot } from './slot-1cd90e53.js';
-import { w as waitForEvent } from './events-f38f3e59.js';
-import { C as ComponentStore } from './component-store-199a9fd8.js';
-import './tabbable-44932eb7.js';
-import './dom-fafdec9a.js';
-import './throttle-df960210.js';
-
-const drawerCss = ":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 NanoDrawerStyle0 = drawerCss;
-
-const Drawer = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.nanoShow = createEvent(this, "nanoShow", 7);
-        this.nanoHide = createEvent(this, "nanoHide", 7);
-        this.nanoAfterHide = createEvent(this, "nanoAfterHide", 7);
-        this.nanoAfterShow = createEvent(this, "nanoAfterShow", 7);
-        this.nanoInitialFocus = createEvent(this, "nanoInitialFocus", 7);
-        this.nanoRquestClose = createEvent(this, "nanoRquestClose", 7);
-    }
-    get host() { return getElement(this); }
-    originalTrigger;
-    drawer;
-    overlay;
-    modal;
-    get panel() {
-        return this._panel;
-    }
-    set panel(ele) {
-        if (this._panel) {
-            this.panel.removeEventListener('animationend', this.handleTransitionEnd);
-        }
-        if (!ele)
-            return;
-        ele.addEventListener('transitionend', this.handleTransitionEnd);
-        this._panel = ele;
-    }
-    _panel;
-    noDismiss = false;
-    hasFooter;
-    // Public API
-    /**
-     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
-     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
-     */
-    open = false;
-    /**
-     * The drawer's label as displayed in the header. You should always include a relevant label even when using
-     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
-     */
-    label;
-    /** The direction from which the drawer will open. */
-    placement = 'end';
-    /**
-     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-     * its parent element, set this attribute and add `position: relative` to the parent.
-     */
-    contained = false;
-    /**
-     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-     * accessible way for users to dismiss the drawer.
-     */
-    noHeader = false;
-    /** Store search queries (against this ID) to the component store. Use in conjunction with storeMethod */
-    storeId;
-    /** The method of storage. Either session storage, url hash (after the '#') or url query (after the '?'). */
-    storeMethod = 'url-hash';
-    /** 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  */
-    noUserDismiss = false;
-    /** Relocate the dialog to the root of the DOM. Useful for elements bound via css `transform: ...` */
-    hoist = false;
-    handleHoistChange() {
-        if (!this.hoist || Array.from(document.body.children).includes(this.host))
-            return;
-        document.body.prepend(this.host);
-    }
-    /** Emitted when the drawer opens. */
-    nanoShow;
-    /** Emitted when the drawer closes. */
-    nanoHide;
-    /** Emitted after the drawer closes and all animations are complete. */
-    nanoAfterHide;
-    /** Emitted after the drawer opens and all animations are complete. */
-    nanoAfterShow;
-    /**
-     * Emitted when the drawer opens and is ready to receive focus. Calling
-     * `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
-     */
-    nanoInitialFocus;
-    /**
-     * Emitted when the user attempts to
-     * close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
-     * `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
-     * destructive behavior such as data loss.
-     */
-    nanoRquestClose;
-    /**
-     * Shows the drawer.
-     * @returns a promise that resolves when the drawer has finished opening
-     */
-    async show() {
-        if (this.open)
-            return undefined;
-        this.open = true;
-        return waitForEvent(this.host, 'nanoAfterShow');
-    }
-    /**
-     * Hides the drawer
-     * @returns a promise that resolves when the drawer has finished closing
-     */
-    async hide() {
-        if (!this.open)
-            return undefined;
-        this.open = false;
-        return waitForEvent(this.host, 'nanoAfterHide');
-    }
-    requestClose(source) {
-        const nanoRequestClose = this.nanoRquestClose.emit({ source });
-        if (nanoRequestClose.defaultPrevented || this.noUserDismiss) {
-            this.noDismiss = true;
-            setTimeout(() => (this.noDismiss = false), 250);
-            return;
-        }
-        this.hide();
-    }
-    // Prop Change Handlers
-    handleNoModalChange() {
-        if (this.open && !this.contained) {
-            this.modal.activate();
-            lockBodyScrolling(this.host);
-        }
-        if (this.open && this.contained) {
-            this.modal.deactivate();
-            unlockBodyScrolling(this.host);
-        }
-    }
-    async handleOpenChange() {
-        if (this.open) {
-            // Show
-            this.nanoShow.emit();
-            this.addOpenListeners();
-            this.originalTrigger = document.activeElement;
-            // Lock body scrolling only if the drawer isn't contained
-            if (!this.contained) {
-                this.modal.activate();
-                lockBodyScrolling(this.host);
-            }
-            // When the drawer is shown, Safari will attempt to set focus on whatever element has autofocus. This causes the
-            // drawer's animation to jitter, so we'll temporarily remove the attribute, call `focus({ preventScroll: true })`
-            // ourselves, and add the attribute back afterwards.
-            const autoFocusTarget = this.host.querySelector('[autofocus]');
-            if (autoFocusTarget) {
-                autoFocusTarget.removeAttribute('autofocus');
-            }
-            this.drawer.hidden = false;
-            // Set initial focus
-            requestAnimationFrame(() => {
-                const nanoInitialFocus = this.nanoInitialFocus.emit();
-                if (!nanoInitialFocus.defaultPrevented) {
-                    // Set focus to the autofocus target and restore the attribute
-                    if (autoFocusTarget) {
-                        autoFocusTarget.focus({
-                            preventScroll: true,
-                        });
-                    }
-                    else {
-                        this.panel.focus({ preventScroll: true });
-                    }
-                }
-                // Restore the autofocus attribute
-                if (autoFocusTarget) {
-                    autoFocusTarget.setAttribute('autofocus', '');
-                }
-            });
-            this.nanoAfterShow.emit();
-            return;
-        }
-        // Hide
-        this.nanoHide.emit();
-        this.removeOpenListeners();
-        if (!this.contained) {
-            this.modal.deactivate();
-            unlockBodyScrolling(this.host);
-        }
-        // Restore focus to the original trigger
-        const trigger = this.originalTrigger;
-        if (typeof trigger?.focus === 'function') {
-            setTimeout(() => trigger.focus());
-        }
-    }
-    // Event Handling
-    addOpenListeners() {
-        document.addEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    removeOpenListeners() {
-        document.removeEventListener('keydown', this.handleDocumentKeyDown);
-    }
-    handleDocumentKeyDown = (event) => {
-        // Contained drawers aren't modal and don't response to the escape key
-        if (this.contained) {
-            return;
-        }
-        if (event.key === 'Escape' && this.modal.isActive() && this.open) {
-            event.stopImmediatePropagation();
-            this.requestClose('keyboard');
-        }
-    };
-    handleTransitionEnd = (event) => {
-        if (event.propertyName === 'opacity' &&
-            event
-                .composedPath()
-                .find((node) => node === this.panel || node === this.overlay)) {
-            if (!this.open) {
-                this.drawer.hidden = true;
-                // Now that the dialog is hidden, restore the overlay and panel for next time
-                this.overlay.hidden = false;
-                this.panel.hidden = false;
-            }
-            if (this.open)
-                this.nanoAfterShow.emit();
-            else
-                this.nanoAfterHide.emit();
-        }
-    };
-    handleSlotChange = () => {
-        this.hasFooter = hasSlot(this.host, 'footer');
-    };
-    // Component Lifecycle
-    connectedCallback() {
-        this.handleHoistChange();
-        this.modal = new Modal(this.host);
-    }
-    disconnectedCallback() {
-        unlockBodyScrolling(this.host);
-    }
-    componentWillLoad() {
-        this.handleSlotChange();
-        // Show on init if open
-        if (this.open)
-            this.show();
-        if (this.storeId)
-            ComponentStore.init(this, ['open'], this.storeMethod, this.storeId);
-    }
-    componentDidLoad() {
-        this.drawer.hidden = !this.open;
-        if (this.open) {
-            this.addOpenListeners();
-            if (!this.contained) {
-                this.modal.activate();
-                lockBodyScrolling(this.host);
-            }
-        }
-    }
-    render() {
-        return (h(Host, { key: '3993edab973a4e83921ef48b3a856eab71314995', class: "nano-drawer" }, h("div", { key: '81b617363f43048bb8e692838304641ed431e716', ref: (ele) => (this.drawer = ele), part: "base", class: {
-                drawer: true,
-                'drawer--open': this.open,
-                [`drawer--${this.placement}`]: true,
-                'drawer--contained': this.contained,
-                'drawer--fixed': !this.contained,
-                'drawer--has-footer': hasSlot(this.host, 'footer'),
-                'drawer--has-header': !this.noHeader,
-                'drawer--nodismiss': this.noDismiss,
-            } }, h("div", { key: '92742f6c66f84178beec198eafa587f1e8386764', ref: (ele) => (this.overlay = ele), part: "overlay", class: "drawer__overlay", onClick: () => this.requestClose('overlay'), tabindex: "-1" }), h("div", { key: '6e083a039111b507f9a86b485e6b22b5b47c3f69', ref: (ele) => (this.panel = ele), 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" }, h("div", { key: '6b32c26cbc35acd4717fa7f9cc80d829e8866433', class: "drawer__main" }, !this.noHeader && (h("nano-sticker", { key: '9969d99e402c4ea254aa25c2cff35e12fb60a9bc' }, h("div", { key: '75e40fc490e870674d055ac10c1862e6be48f03e', part: "header", class: "drawer__header" }, h("h2", { key: 'cdb1ebcff62005cc38f56613d5e2c0bd1a47749f', part: "title", class: "drawer__title", id: "title" }, h("slot", { key: 'e5c7f9fe9f4c32f36b978a8bdab51b7954fe7afd', name: "label" }, this.label.length > 0
-            ? this.label
-            : String.fromCharCode(65279))), h("div", { key: 'c78dcf660ad85ae8e2c9191ddf8609d8e8847a95', part: "header-actions", class: "drawer__header-actions" }, h("slot", { key: 'b7dc420567ab5f0e74b57141a0779603bc244318', name: "header-actions" }), !this.noUserDismiss && (h("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') })))))), h("div", { key: '7ac9f1fc50efa2e13f73d5b15655ed585909a94d', part: "body", class: "drawer__body" }, h("slot", { key: '9f797d1de7cdcf634e2ee51d5e0bc055bae138df' })), h("nano-sticker", { key: '8807c8a2fc16f784f62e11c23edd607b757ab2b4', position: "bottom" }, h("footer", { key: 'a96da38ea84661627d2d905207f0c23e49962611', part: "footer", class: "drawer__footer" }, h("slot", { key: 'da0386d4942cf4ab05c605735a080321b6f87204', name: "footer", onSlotchange: this.handleSlotChange }))))))));
-    }
-    static get watchers() { return {
-        "hoist": ["handleHoistChange"],
-        "contained": ["handleNoModalChange"],
-        "open": ["handleOpenChange"]
-    }; }
-};
-Drawer.style = NanoDrawerStyle0;
-
-export { Drawer as nano_drawer };
-
-//# sourceMappingURL=nano-drawer.entry.js.map

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

@@ -1 +0,0 @@
-{"file":"nano-drawer.entry.js","mappings":"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","names":[],"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"],"version":3}