@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/nano-components/{p-b79dc23a.system.entry.js.map → p-531d5275.system.entry.js.map}

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

package/dist/nano-components/p-5653961d.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(t,e,i,s){function n(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,o){function r(t){try{h(s.next(t))}catch(e){o(e)}}function c(t){try{h(s["throw"](t))}catch(e){o(e)}}function h(t){t.done?i(t.value):n(t.value).then(r,c)}h((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},s,n,o,r;return r={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function c(t){return function(e){return h([t,e])}}function h(r){if(s)throw new TypeError("Generator is already executing.");while(i)try{if(s=1,n&&(o=r[0]&2?n["return"]:r[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,r[1])).done)return o;if(n=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;n=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){i.label=r[1];break}if(r[0]===6&&i.label<o[1]){i.label=o[1];o=r;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(r);break}if(o[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(c){r=[6,c];n=0}finally{s=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-b430a9b6.system.js","./p-1c216ca4.system.js","./p-1d13dbdf.system.js","./p-ef053a2f.system.js"],(function(t){"use strict";var e,i,s,n,o,r,c,h,a,l,u;return{setters:[function(t){e=t.r;i=t.c;s=t.h;n=t.e;o=t.g},function(t){r=t.i},function(t){c=t.r;h=t.h;a=t.b},function(t){l=t.a},function(t){u=t.d}],execute:function(){var f=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}';function d(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function p(t,e){var i=e instanceof Document?document.documentElement:e;return l(t,i)}var k=t("nano_sticker",function(){function t(t){var s=this;e(this,t);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7);this.isRtl=false;this.scrollPosCache=0;this.scrollPosThresholdCache=0;this.cacheOffset=0;this.pauseResizeWatcher=false;this.listenForScrollParent=false;this.positions=[];this.pauseHide=false;this.hasBootstrapped=false;this.isStuck=false;this.isRootSticker=true;this.hide=false;this.scrollHide=false;this.multiStickerHide=false;this.scrollingTo=false;this.quietModeIsOn=false;this.stuckCounter=0;this.stickerIndex=0;this._offset=0;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.setupParentResizeListener=function(){if(s.parentSizeObserver){s.parentSizeObserver.disconnect();s.parentSizeObserver=undefined}s.parentSizeObserver=new r((function(t){for(var e=0,i=t;e<i.length;e++){var n=i[e];var o=void 0,r=void 0;if(n.contentRect.height)o=n.contentRect.height;if(n.contentRect.width)r=n.contentRect.width;if(typeof s.quietMode==="object"){if(r<s.quietMode.w||o<s.quietMode.h)s.quietModeIsOn=true;else s.quietModeIsOn=false}if(s.breakPointMin){if(r>s.breakPointMin)s.isSticky=true;else s.isSticky=false}if(s.breakPointMax){if(r<s.breakPointMax)s.isSticky=true;else s.isSticky=false}if(s.isRootSticker&&s.sticker&&s.autoResize)s.sticker.style.width=s.host.scrollWidth+"px"}}));var t=s.scrollParent instanceof Document?s.scrollParent.documentElement:s.scrollParent;if(t)s.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=function(t){if(t.detail.sticker!==s.stickToEle)return;switch(t.type){case"nanoHide":s._offset=0;s.cacheOffset=s.offset;s.offset=0;if(!s.isStuck)s.moveTrigger(false);if(!s.isRootSticker&&s.quietModeIsOn){c((function(){s.stickToEle.style.minHeight=s.stickToEleInitSize.height+(s.host.scrollHeight+(typeof s.cacheOffset==="object"?s.cacheOffset.v:s.cacheOffset))+"px";s.stickToEle.setTriggerPos(s.stickToEleInitSize.height*-1)}))}break;case"nanoShow":s._offset=s.stickToEleInitSize.height;s.offset=s.cacheOffset;s.moveTrigger(true);if(!s.isRootSticker&&s.quietModeIsOn){c((function(){s.stickToEle.style.minHeight="";s.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":s.stickToEleInitSize=s.stickToEle.getBoundingClientRect();s._offset=s.stickToEleInitSize.height;break}};this.onStickEvent=function(t){return __awaiter(s,void 0,void 0,(function(){var e,i;return __generator(this,(function(s){switch(s.label){case 0:e=t.detail?t.detail.sticker:null;if(!e||e.position!==this.position)return[2];return[4,e.getTriggerPos()];case 1:i=s.sent();if(t.type==="nanoStuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&e!==this.host&&e.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return[2];if(this.positions.includes("top")&&this.triggerPos.top<i.top||this.positions.includes("bottom")&&this.triggerPos.top>i.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}return[2]}}))}))};this.onScroll=function(){var t=d(s.scrollParent);if(t<s.scrollPosCache){if(!s.positions.includes("bottom"))s.handleScrollTo();else s.handleScrollAway(t)}if(t>s.scrollPosCache){if(!s.positions.includes("bottom"))s.handleScrollAway(t);else s.handleScrollTo()}s.scrollPosCache=t}}t.prototype.isHiding=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.hide]}))}))};t.prototype.isSticking=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.shouldStick();return[2,this.isStuck]}))}))};t.prototype.setTriggerPos=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this._offset=t]}))}))};t.prototype.getTriggerPos=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.triggerPos]}))}))};t.prototype.pauseHiding=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.pauseHide=t]}))}))};t.prototype.updateTriggerOffset=function(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=p(this.trigger,this.scrollParent)};t.prototype.stickerResizeListener=function(){var t=this;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new r((function(e){for(var i=0,s=e;i<s.length;i++){var n=s[i];if(t.pauseResizeWatcher)return;if(n.contentRect.height){if(t.position==="top")t.host.style.height=n.contentRect.height+"px";if(t.position==="bottom")t.host.style.minHeight=n.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)};t.prototype.quietModeChange=function(){var t=this;if(this.quietMode==="on")c((function(){return t.quietModeIsOn=true}));else if(this.quietMode==="off")c((function(){return t.quietModeIsOn=false}))};t.prototype.setOffset=function(){var t,e,i,s;var n=this;this.trigger.setAttribute("style","");var o,r,c,h;var l=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!l)return;if(typeof this.offset==="object")t=this.offset,o=t.v,r=t.h;else o=r=this.offset;if(typeof this._offset==="object")e=this._offset,i=e.v,o=i===void 0?c:i,s=e.h,r=s===void 0?h:s;else c=h=this._offset;var u=function(t){var e=t.match(/(top|bottom)/)?o:r;f(t);l.style[t]=e+"px";if(!a())return;if(e)n.host.style.setProperty("--hide-transform-amount","(110% + "+e+"px)");else n.host.style.setProperty("--hide-transform-amount",null)};var f=function(t){var e=t.match(/(top|bottom)/)?o+c:r+h;n.trigger.style[t]=e*-1+"px";n.trigger.style.position="relative";n.trigger.style.height="1px"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)u("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)u("left");if(this.positions.includes("top"))u("top");if(this.positions.includes("bottom"))u("bottom")};t.prototype.positionChange=function(){this.positions=this.position.split("-");this.setOffset()};t.prototype.stuckChange=function(){return __awaiter(this,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(i){if(this.isStuck){if(this.stickToEle){t=h(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((function(t){if(h(e.host))e.stickToEle.appendChild(t);else e.stickToEle.querySelector(".sticker-content").appendChild(t);t.style.order=e.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((function(t){e.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}return[2]}))}))};t.prototype.attachScrollListeners=function(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else{this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}};t.prototype.handleParentEvents=function(t,e){if(e===void 0){e=null}if(!this.listenForScrollParent)return;if(e)this.manageListenersOnParent(false,e);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)};t.prototype.stickToEleChange=function(t,e){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(e){e.removeEventListener("nanoHide",this.onStickToDisplayEvent);e.removeEventListener("nanoShow",this.onStickToDisplayEvent);e.removeEventListener("nanoStuck",this.onStickToDisplayEvent);e.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}};t.prototype.stickToChange=function(){if(this.stickTo)this.stickToEle=this.scrollParent.querySelector(this.stickTo);else this.stickToEle=undefined};t.prototype.visibilityDecisionHandler=function(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false};t.prototype.handleHideChange=function(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})};t.prototype.setupIO=function(){var t=this;if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;var e=this.scrollParent;if(this.scrollParent instanceof Document)e=null;this.io=new window.IntersectionObserver((function(e){if(t.pauseResizeWatcher||!t.isSticky)return;t.shouldStick(e.slice(-1)[0])}),{root:e});this.io.observe(this.trigger)};t.prototype.manageListenersOnParent=function(t,e){var i=e||this.scrollParent;if(!i)return;if(!t){try{if(this.quietModeIsOn)i.removeEventListener("scroll",this.onScroll);i.removeEventListener("nanoStuck",this.onStickEvent);i.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(s){console.error("Events haven`t been added")}}else{i.addEventListener("nanoStuck",this.onStickEvent);i.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()};t.prototype.handleScrollTo=function(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false};t.prototype.handleScrollAway=function(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true};t.prototype.moveTrigger=function(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)};t.prototype.getScrollParent=function(){var t=/(auto|scroll)/;var e=function(t,i){if(t.parentNode===null){return i}return e(t.parentNode,i.concat([t]))};var i=function(t,e){return getComputedStyle(t,null).getPropertyValue(e)};var s=function(t){return i(t,"overflow")+i(t,"overflow-y")+i(t,"overflow-x")};var n=function(e){return t.test(s(e))};var o=document.documentElement.getBoundingClientRect().height;var r=function(t){if(!(t instanceof HTMLElement))return;var i=e(t,[]);return i.find((function(t){return n(t)&&t.getBoundingClientRect().height!==o}))||document};return r(this.host)};t.prototype.shouldStick=function(t){var e;if(this.positions.includes("top")){if(!this.isRootSticker)e=p(this.trigger,this.scrollParent).top;else e=this.trigger.getBoundingClientRect().top;this.isStuck=e<-1}else if(this.positions.includes("bottom")){e=this.trigger.getBoundingClientRect().top;var i=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=e>i.height+i.top}};t.prototype.bootstrapGurantor=function(){var t=this;this.hasBootstrapped=true;this.scrollParent=this.scrollParent||this.getScrollParent();this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((function(e){return e.position===t.position})).findIndex((function(e){return e===t.host}));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((function(e){e.style.order=t.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=u(this.onStickToDisplayEvent,50)};t.prototype.connectedCallback=function(){var t=this;this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(function(){setTimeout((function(e){return t.bootstrapGurantor()}),200)}));setTimeout((function(e){if(!t.hasBootstrapped)t.bootstrapGurantor()}),1e3)};t.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.quietMode="off";this.scrollParent=null};t.prototype.render=function(){var t=this;return s(n,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:function(e){return t.sticker=e}},s("div",{class:"sticker-content",ref:function(e){return t.content=e}},s("slot",null))))};Object.defineProperty(t.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}},enumerable:false,configurable:true});return t}());k.style=f}}}));
+//# sourceMappingURL=p-5653961d.system.entry.js.map

package/dist/nano-components/{p-18f49ebf.system.entry.js.map → p-5653961d.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticky/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","exports","class_1","hostRef","_this","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","_i","entries_1","length","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","__awaiter","getTriggerPos","incomingTriggerPos","_a","sent","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","prototype","isHiding","isSticking","shouldStick","pauseHiding","pause","updateTriggerOffset","trigger","stickerResizeListener","contentSizeObserver","entries_2","content","quietModeChange","setOffset","setAttribute","_v","_h","_b","_c","_d","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","positionChange","split","stuckChange","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","attachScrollListeners","addEventListener","passive","capture","removeEventListener","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","stickToChange","stickTo","visibilityDecisionHandler","handleHideChange","nanoHide","nanoShow","setupIO","io","root","IntersectionObserver","slice","addEvents","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","getScrollParent","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","bootstrapGurantor","createElement","classList","add","querySelectorAll","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.quietMode = 'off';\n    this.scrollParent = null;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticky/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","exports","class_1","hostRef","_this","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","_i","entries_1","length","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","__awaiter","getTriggerPos","incomingTriggerPos","_a","sent","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","prototype","isHiding","isSticking","shouldStick","pauseHiding","pause","updateTriggerOffset","trigger","stickerResizeListener","contentSizeObserver","entries_2","content","quietModeChange","setOffset","setAttribute","_v","_h","_b","_c","_d","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","positionChange","split","stuckChange","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","attachScrollListeners","addEventListener","passive","capture","removeEventListener","handleParentEvents","_","oldParent","manageListenersOnParent","stickToEleChange","oldEle","stickToChange","stickTo","visibilityDecisionHandler","handleHideChange","nanoHide","nanoShow","setupIO","io","root","IntersectionObserver","slice","addEvents","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","getScrollParent","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","bootstrapGurantor","createElement","classList","add","querySelectorAll","filter","findIndex","debounce","connectedCallback","dir","ownerDocument","setTimeout","disconnectedCallback","render","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.quietMode = 'off';\n    this.scrollParent = null;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-56ba0d63.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as o,h as n}from"./p-ab5813a7.js";import{f as t}from"./p-f8f89998.js";const a=".sc-nano-icon-button-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:-webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";let i=class{constructor(n){o(this,n);this.type="button";this.disabled=false}componentDidLoad(){t.observe(this.button)}connectedCallback(){if(this.button)t.observe(this.button)}disconnectedCallback(){t.unobserve(this.button)}render(){const o=this.href===undefined?"button":"a";return n(o,{part:"base",ref:o=>this.button=o,class:{"icon-button":true,"icon-button--disabled":this.disabled},"aria-label":this.label,name:this.name,value:this.value,href:this.href||undefined,target:this.href&&this.target?this.target:undefined,type:!this.href&&this.type?this.type:undefined},n("nano-icon",{name:this.iconName,src:this.iconSrc,"aria-hidden":"true"}))}};i.style=a;export{i as nano_icon_button};
+//# sourceMappingURL=p-56ba0d63.entry.js.map

package/dist/nano-components/p-56ba0d63.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","src/components/icon-button/icon-button.tsx"],"names":["iconButtonCss","IconButton","[object Object]","hostRef","this","type","disabled","focusVisible","observe","button","unobserve","TagType","href","undefined","h","part","ref","el","class","icon-button","icon-button--disabled","aria-label","label","name","value","target","iconName","src","iconSrc","aria-hidden"],"mappings":";;;+EAAA,MAAMA,EAAgB,qhECUTC,EAAU,MALvBC,YAAAC,aAe2BC,KAAAC,KAAsC,SAatCD,KAAAE,SAAW,MAUpCJ,mBACEK,EAAaC,QAAQJ,KAAKK,QAG5BP,oBACE,GAAIE,KAAKK,OAAQF,EAAaC,QAAQJ,KAAKK,QAG7CP,uBACEK,EAAaG,UAAUN,KAAKK,QAG9BP,SACE,MAAMS,EAAUP,KAAKQ,OAASC,UAAY,SAAY,IAEtD,OACEC,EAACH,EAAO,CACNI,KAAK,OACLC,IAAMC,GAAQb,KAAKK,OAASQ,EAC5BC,MAAO,CACLC,cAAe,KACfC,wBAAyBhB,KAAKE,UAC/Be,aACWjB,KAAKkB,MACjBC,KAAMnB,KAAKmB,KACXC,MAAOpB,KAAKoB,MACZZ,KAAMR,KAAKQ,MAAQC,UACnBY,OAAQrB,KAAKQ,MAAQR,KAAKqB,OAASrB,KAAKqB,OAASZ,UACjDR,MAAOD,KAAKQ,MAAQR,KAAKC,KAAOD,KAAKC,KAAOQ,WAE5CC,EAAA,YAAA,CAAWS,KAAMnB,KAAKsB,SAAUC,IAAKvB,KAAKwB,QAAOC,cAAc","sourcesContent":["@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --border-radius: defaults to #{$border-radius-medium};\n    * @prop --color: defaults to #{$color-palegrey};\n    * @prop --active-color: defaults to #{$color-darkblue--faded};\n    * @prop --hover-color: defaults to #{$color-blue};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{$spacing-small};\n    */\n  display: inline-block;\n\n  --border-radius: #{$border-radius-medium};\n  --active-color: #{$color-darkblue--faded};\n  --hover-color: #{$color-blue};\n  --nano-color-base: var(--color, #{$color-mediumgrey});\n  --background: transparent;\n  --padding: #{$spacing-small};\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  background: var(--background);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  transition: box-shadow #{$transition-xfast} ease-in-out;\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. */\n\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  render() {\n    const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n    return (\n      <TagType\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        aria-label={this.label}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <nano-icon name={this.iconName} src={this.iconSrc} aria-hidden=\"true\" />\n      </TagType>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-593de29b.system.entry.js

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

package/dist/nano-components/{p-76b13c27.system.entry.js.map → p-593de29b.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","exports","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/drawer/drawer.scss?tag=nano-drawer&encapsulation=shadow","src/components/drawer/drawer.tsx"],"names":["drawerCss","id","Drawer","exports","class_1","hostRef","this","componentId","hasFooter","isVisible","open","label","placement","contained","noHeader","type","prototype","handleOpenChange","show","hide","handleTypeChange","contentEle","console","warn","handleContentSelector","contentSelector","host","ownerDocument","querySelector","connectedCallback","handleCloseClick","bind","handleTransitionEnd","handleKeyDown","handleOverlayClick","handleSlotChange","modal","Modal","componentWillLoad","disconnectedCallback","unlockBodyScrolling","nanoShow","emit","defaultPrevented","activate","lockBodyScrolling","style","right","transition","position","overflow","setTimeout","_","_this","nanoHide","deactivate","event","key","slOverlayDismiss","nanoOverlayDismiss","target","propertyName","classList","contains","nanoAfterShow","nanoAfterHide","panel","focus","render","placementClass","typeClass","isRtl","dir","h","Host","part","class","_a","drawer","drawer--open","drawer--visible","onKeyDown","onTransitionEnd","onClick","ref","el","role","aria-modal","aria-hidden","aria-label","aria-labelledby","tabIndex","name","String","fromCharCode","onSlotchange"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/utilities/css-patterns/visually_hidden';\n\n:host {\n  /**\n  * @prop --size: The preferred size of the drawer; width or height depending on placement. Note that the drawer will shrink to accommodate smaller screens. Defaults to 25rem\n  * @prop --panel-background-color: background color of panel. Default to 'white'\n  * @prop --panel-shadow: Defaults to '0 4px 16px rgba(0, 0, 0, 0.1)';\n  * @prop --overlay-color: Defaults to 'hsla(203, 10%, 20%, 0.5)';\n  */\n\n  position: relative;\n  display: block;\n\n  --size: 25rem;\n  --panel-background-color: white;\n  --panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  --overlay-color: hsla(203, 10%, 20%, 0.5);\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: 2000;\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--panel-background-color);\n  box-shadow: var(--panel-shadow);\n  transition: 250ms transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--start .drawer__panel {\n  @include position-horizontal(0, auto);\n  @include transform(translate3d(-100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--end .drawer__panel {\n  @include position-horizontal(auto, 0);\n  @include transform(translate3d(100%, 0, 0));\n\n  top: 0;\n  bottom: auto;\n  width: var(--size);\n  height: 100%;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  // font-size: var(--sl-font-size-large);\n  // line-height: var(--sl-line-height-dense);\n  padding: 20px;\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  // font-size: var(--sl-font-size-x-large);\n  // padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  // padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  // padding: var(--sl-spacing-large);\n\n  // ::slotted(sl-button:not(:last-of-type)) {\n  //   margin-right: var(--sl-spacing-x-small);\n  // }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--overlay-color);\n  opacity: 0;\n  transition: 250ms opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport Modal from '../../utils/modal';\n\nlet id = 0;\n\n/**\n * WIP / TODO. https://git.oxfordnanolabs.local/Digital/nano-components/-/issues/24\n * @slot - The drawer's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n */\n@Component({\n  tag: 'nano-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  private componentId = `drawer-${++id}`;\n  private modal: Modal;\n  private panel: HTMLElement;\n  private contentEle: HTMLElement;\n\n  @Element() host: HTMLNanoDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /**\n   * Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods.\n   */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'end' | 'bottom' | 'start' = 'end';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  /**\n   * The display type of the drawer\n   */\n  @Prop() type: 'overlay' | 'reveal' | 'push' = 'overlay';\n\n  /**\n   * Required for 'reveal' and 'push' types\n   * A valid DOM selector of the content element that this drawer will push or reveal underneath\n   * Please remember - elements wrapping the content element must be 'overflow: hidden'\n   * otherwise menus will be shown when closed\n   */\n  @Prop() contentSelector: string;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  @Watch('type')\n  handleTypeChange() {\n    if (this.type !== 'push' && this.type !== 'reveal') return;\n    if (!this.contentEle) {\n      this.type = 'overlay';\n      console.warn('a valid contentSelector must be set');\n      return;\n    }\n  }\n\n  @Watch('contentSelector')\n  handleContentSelector() {\n    if (!this.contentSelector) this.contentEle = null;\n    else\n      this.contentEle = (this.host.ownerDocument as Document).querySelector(\n        this.contentSelector\n      );\n  }\n\n  /**\n   * Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened.\n   */\n  @Event() nanoShow: EventEmitter;\n\n  /**\n   * Emitted after the drawer opens and all transitions are complete.\n   */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /**\n   * Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed.\n   */\n  @Event() nanoHide: EventEmitter;\n\n  /**\n   * Emitted after the drawer closes and all transitions are complete.\n   */\n  @Event() nanoAfterHide: EventEmitter;\n\n  /**\n   * Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing.\n   */\n  @Event() nanoOverlayDismiss: EventEmitter;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host);\n  }\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n    this.handleContentSelector();\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const nanoShow = this.nanoShow.emit();\n    if (nanoShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (!this.contentEle || (this.type !== 'push' && this.type !== 'reveal'))\n      return;\n    this.contentEle.style.right = '0';\n    this.contentEle.style.transition = 'all ease 250ms';\n    this.contentEle.style.position = 'relative';\n    this.contentEle.style.overflow = 'hidden';\n    setTimeout((_) => (this.contentEle.style.right = '25rem'), 0);\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const nanoHide = this.nanoHide.emit();\n    if (nanoHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n\n    if (!this.contentEle) return;\n    this.contentEle.style.transition = '';\n    this.contentEle.style.position = '';\n    this.contentEle.style.overflow = '';\n    this.contentEle.style.right = '';\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  private handleOverlayClick() {\n    const slOverlayDismiss = this.nanoOverlayDismiss.emit();\n\n    if (!slOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  private handleSlotChange() {\n    this.hasFooter = !!this.host.querySelector('[slot=\"footer\"]');\n  }\n\n  private handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (\n      event.propertyName === 'transform' &&\n      target.classList.contains('drawer__panel')\n    ) {\n      this.isVisible = this.open;\n      this.open ? this.nanoAfterShow.emit() : this.nanoAfterHide.emit();\n\n      if (this.open) {\n        this.panel.focus();\n      }\n    }\n  }\n\n  render() {\n    const placementClass = 'drawer--' + this.placement;\n    const typeClass = 'drawer--' + this.type;\n\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host dir={isRtl ? 'rtl' : null}>\n        <div\n          part=\"base\"\n          class={{\n            drawer: true,\n            'drawer--open': this.open,\n            'drawer--visible': this.isVisible,\n            [typeClass]: true,\n            [placementClass]: true,\n            'drawer--contained': this.contained,\n            'drawer--fixed': !this.contained,\n            'drawer--has-footer': this.hasFooter,\n          }}\n          onKeyDown={this.handleKeyDown}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <div\n            part=\"overlay\"\n            class=\"drawer__overlay\"\n            onClick={this.handleOverlayClick}\n          />\n\n          <div\n            ref={(el) => (this.panel = el)}\n            part=\"panel\"\n            class=\"drawer__panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-hidden={this.open ? 'false' : 'true'}\n            aria-label={this.noHeader ? this.label : null}\n            aria-labelledby={\n              !this.noHeader ? `${this.componentId}-title` : null\n            }\n            tabIndex={0}\n          >\n            {!this.noHeader && (\n              <header part=\"header\" class=\"drawer__header\">\n                <span\n                  part=\"title\"\n                  class=\"drawer__title\"\n                  id={`${this.componentId}-title`}\n                >\n                  <slot name=\"label\">\n                    {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                    {this.label || String.fromCharCode(65279)}\n                  </slot>\n                </span>\n                {/* <sl-icon-button part=\"close-button\" class=\"drawer__close\" name=\"x\" onClick={this.handleCloseClick} /> */}\n              </header>\n            )}\n\n            <div part=\"body\" class=\"drawer__body\">\n              <slot />\n            </div>\n\n            <footer part=\"footer\" class=\"drawer__footer\">\n              <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n            </footer>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}