@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/p-568be88a.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as i,h as a,e as t,g as s}from"./p-f55560d3.js";import{l as e,u as r}from"./p-5af040f4.js";import{M as n}from"./p-8c9e74c7.js";import{r as d}from"./p-c930d4f5.js";import{C as l}from"./p-e1fd68eb.js";import{h}from"./p-cd494bc6.js";import"./p-a0ddf496.js";import"./p-a5917bdc.js";import"./p-dfe5a97d.js";import"./p-0e826935.js";let b=0,c=class{constructor(a){o(this,a),this.nanoShow=i(this,"nanoShow",7),this.nanoAfterShow=i(this,"nanoAfterShow",7),this.nanoHide=i(this,"nanoHide",7),this.nanoAfterHide=i(this,"nanoAfterHide",7),this.nanoInitialFocus=i(this,"nanoInitialFocus",7),this.nanoRequestClose=i(this,"nanoRequestClose",7),this.componentId="dialog-"+ ++b,this.willShow=!1,this.willHide=!1,this.addedTransEnd=!1,this.isVisible=!1,this.noDismiss=!1,this.hasFooter=!1,this.showRibbon=!0,this.open=!1,this.label="",this.noHeader=!1,this.noFooter=!1,this.noUserDismiss=!1,this.storeMethod="url-hash",this.handleKeyDown=o=>{"Escape"===o.key&&this.requestClose()},this.requestClose=()=>{this.nanoRequestClose.emit().defaultPrevented||this.noUserDismiss?(this.noDismiss=!0,setTimeout((()=>this.noDismiss=!1),250)):this.hide()},this.handleTransitionEnd=o=>{"opacity"===o.propertyName&&o.composedPath().find((o=>o===this.panel||o===this.overlay))&&(this.isVisible=this.open,this.willShow=!1,this.willHide=!1,this.open?this.nanoAfterShow.emit():this.nanoAfterHide.emit())},this.handleSlotChange=()=>{this.hasFooter=h(this.host,"footer")}}handleOpenChange(){this.open?this.show():this.hide()}async show(){this.willShow||(this.nanoShow.emit().defaultPrevented?this.open=!1:(this.originalTrigger=document.activeElement,this.willShow=!0,this.isVisible=!0,this.open=!0,this.modal.activate(),e(this.host),this.open&&d((()=>{this.nanoInitialFocus.emit().defaultPrevented||this.panel.focus({preventScroll:!0})}))))}async hide(){if(this.willHide)return;if(this.nanoHide.emit().defaultPrevented)return void(this.open=!0);this.willHide=!0,this.open=!1,this.modal.deactivate(),r(this.host),this.stopVideos();const o=this.originalTrigger;o&&"function"==typeof o.focus&&setTimeout((()=>o.focus()))}stopVideos(){Array.from(this.host.querySelectorAll("iframe,video")).forEach((o=>{"video"===o.tagName.toLowerCase()?o.pause():o.src=o.src}))}connectedCallback(){this.modal=new n(this.host),this.panel&&(this.addedTransEnd=!0,this.panel.addEventListener("transitionend",this.handleTransitionEnd))}componentWillLoad(){this.handleSlotChange(),this.open&&this.show(),this.storeId&&l.init(this,["open"],this.storeMethod,this.storeId)}componentDidLoad(){this.addedTransEnd||this.panel.addEventListener("transitionend",this.handleTransitionEnd)}disconnectedCallback(){r(this.host),this.addedTransEnd=!1,this.panel.removeEventListener("transitionend",this.handleTransitionEnd)}render(){return a(t,{showing:!!this.isVisible||void 0},a("div",{part:"base",class:{dialog:!0,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":!this.noFooter,"dialog--has-header":!this.noHeader,"dialog--nodismiss":this.noDismiss,"dialog--with-ribbon":this.showRibbon},onKeyDown:this.handleKeyDown},a("div",{part:"overlay",class:"dialog__overlay",ref:o=>this.overlay=o,onClick:this.requestClose}),a("div",{ref:o=>this.panel=o,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":this.noHeader?null:`${this.componentId}-title`,tabIndex:0},a("div",{class:"dialog__body-wrap"},!this.noHeader&&a("nano-sticker",null,a("header",{part:"header",class:"dialog__header"},a("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},a("slot",{name:"label"},this.label||String.fromCharCode(65279))),!this.noUserDismiss&&a("nano-icon-button",{exportparts:"base:close-button",class:"dialog__close-icon",label:"close dialog",onClick:this.requestClose,iconName:"light/times"}))),a("div",{part:"body",class:"dialog__body"},a("slot",null)),!this.noFooter&&(this.hasFooter||!this.noUserDismiss)&&a("nano-sticker",{position:"bottom"},a("footer",{part:"footer",class:"dialog__footer"},a("slot",{name:"footer",onSlotchange:this.handleSlotChange}),!this.noUserDismiss&&a("button",{class:"dialog__close-txt",onClick:this.requestClose},"Close")))))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};c.style=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--content-background:#fafafa;--footer-content:#e4e6e8;--scrim-color:var(--nano-layer-overlay-dark, rgba(74, 74, 74, .5));--box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.3));--close-button-color:#b5aea7;--width:60rem;--tint-color:#0084a9;--body-padding-v:var(--nano-spacing-large, 20px);--body-padding-h:var(--nano-spacing-large, 20px);--header-padding-v:var(--nano-spacing-medium, 16px);--header-padding-h:var(--nano-spacing-large, 20px);--footer-padding-v:var(--nano-spacing-medium, 16px);--footer-padding-h:var(--nano-spacing-large, 20px)}.dialog{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--nano-layer-index-modal, 700)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--nano-spacing-xlarge, 24px));max-height:calc(92% - var(--nano-spacing-xlarge, 24px));background-color:var(--content-background);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;transition:var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;overflow:auto}.dialog__panel:focus{outline:none}.dialog--with-ribbon .dialog__panel{border-top:5px solid var(--tint-color)}.dialog--open .dialog__panel{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;-webkit-transform:none;transform:none}.dialog--nodismiss .dialog__panel{-webkit-animation:cannotClose 0.25s ease-in-out 1;animation:cannotClose 0.25s ease-in-out 1}@-webkit-keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cannotClose{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.08);transform:scale(1.08)}100%{-webkit-transform:scale(1);transform:scale(1)}}.dialog__header{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:var(--width);width:100%;background-color:var(--content-background);border-radius:var(--border-radius) var(--border-radius) 0 0;-webkit-transition:var(--nano-transition-fast, 0.1s) box-shadow;transition:var(--nano-transition-fast, 0.1s) box-shadow}.dialog--visible .dialog__header{min-width:auto}[stuck] .dialog__header{-webkit-box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));box-shadow:var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2))}.dialog__title{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;font-size:var(--nano-fontsize-large, 1.25rem);line-height:1.6;padding:var(--header-padding-v) var(--header-padding-h)}.dialog .dialog__close-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--nano-fontsize-xlarge, 1.5rem);padding:0 var(--header-padding-h);--color:var(--close-button-color)}.dialog__body{padding:0 var(--body-padding-h) var(--body-padding-v)}.dialog:not(.dialog--has-header) .dialog__body{padding-top:var(--body-padding-v)}.dialog__body ::slotted(*){max-width:100%}.dialog__body-wrap{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:var(--border-radius)}.dialog:not(.dialog--has-header) .dialog__body-wrap{border-radius:0 0 inherit inherit}.dialog:not(.dialog--has-footer) .dialog__body-wrap{border-radius:inherit inherit 0 0}.dialog__footer{width:100%;padding:var(--footer-padding-v) var(--footer-padding-h);background:var(--footer-content);border-radius:0 0 var(--border-radius) var(--border-radius);position:relative;top:1px}.dialog--visible .dialog__footer{min-width:auto}.dialog__footer ::slotted(button){margin-right:var(--nano-spacing-small, 8px) !important}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__close-txt{color:var(--tint-color);border:none;text-decoration:underline;margin:0;text-underline-offset:4px;background-color:transparent;font:inherit;-webkit-box-align:center;cursor:pointer;font-size:var(--nano-fontsize-small, 0.875rem);padding:0.5rem;border-radius:var(--nano-border-radius-small, 2px);-webkit-transition:-webkit-box-shadow 100ms ease-in-out;transition:-webkit-box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out;transition:box-shadow 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out}.dialog__close-txt:focus{outline:none;-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--scrim-color);opacity:0;-webkit-transition:var(--nano-transition-fast, 0.3s) opacity;transition:var(--nano-transition-fast, 0.3s) opacity;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.dialog--open .dialog__overlay{opacity:1}";export{c as nano_dialog}
-//# sourceMappingURL=p-568be88a.entry.js.map

package/dist/nano-components/p-568be88a.entry.js.map

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

package/dist/nano-components/p-5918ac51.entry.js

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

package/dist/nano-components/p-5918ac51.entry.js.map

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

package/dist/nano-components/p-5f716719.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,o,e,i){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function a(t){try{p(i.next(t))}catch(o){r(o)}}function s(t){try{p(i["throw"](t))}catch(o){r(o)}}function p(t){t.done?e(t.value):n(t.value).then(a,s)}p((i=i.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,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(o){return p([t,o])}}function p(a){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(s){a=[6,s];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,o){for(var e=0,i=o.length,n=t.length;e<i;e++,n++)t[n]=o[e];return t};System.register(["./p-2d59dda3.system.js","./p-93b1eeea.system.js"],(function(t){"use strict";var o,e,i,n,r,a;return{setters:[function(t){o=t.r;e=t.c;i=t.h;n=t.e;r=t.g},function(t){a=t.P}],execute:function(){var s=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip::after{content:"";position:absolute;width:0;height:0;color:black}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:5px}';var p=0;var l=t("nano_tooltip",function(){function t(t){var i=this;o(this,t);this.nanoShow=e(this,"nanoShow",7);this.nanoAfterShow=e(this,"nanoAfterShow",7);this.nanoHide=e(this,"nanoHide",7);this.nanoAfterHide=e(this,"nanoAfterHide",7);this.componentId="tooltip-"+ ++p;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=function(){if(i.hasTrigger("focus")){i.hide()}};this.handleClick=function(){if(i.hasTrigger("click")){i.open?i.hide():i.show()}};this.handleFocus=function(){if(i.hasTrigger("focus")){i.show()}};this.handleKeyDown=function(t){if(i.open&&t.key==="Escape"){t.stopPropagation();i.hide()}};this.handleMouseOver=function(){if(i.hasTrigger("hover")){i.show()}};this.handleMouseOut=function(){if(i.hasTrigger("hover")){i.hide()}};this.handleSlotChange=function(){var t=i.target;var o=i.getTarget();if(o!==t){if(t){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",i.componentId)}}}t.prototype.handleOpenChange=function(){this.open?this.show():this.hide()};t.prototype.componentDidLoad=function(){this.target=this.getTarget();this.popover=new a(this.target,this.tooltipPositioner);this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}};t.prototype.componentDidUpdate=function(){this.syncOptions()};t.prototype.disconnectedCallback=function(){this.popover.destroy();this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(this.isVisible){return[2]}t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return[2]}this.isVisible=true;this.open=true;this.popover.show();return[2]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){if(!this.isVisible){return[2]}t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return[2]}this.isVisible=false;this.open=false;this.popover.hide();return[2]}))}))};t.prototype.getTarget=function(){var t=__spreadArray([],Array.from(this.host.children)).find((function(t){return t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"}));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t};t.prototype.hasTrigger=function(t){var o=this.trigger.split(" ");return o.includes(t)};t.prototype.syncOptions=function(){var t=this;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:function(){return t.nanoAfterHide.emit()},onAfterShow:function(){return t.nanoAfterShow.emit()}})};t.prototype.render=function(){var t=this;return i(n,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:function(o){return t.tooltipPositioner=o},class:"tooltip-positioner"},i("div",{part:"base",ref:function(o){return t.tooltip=o},id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleOpenChange"]}},enumerable:false,configurable:true});return t}());l.style=s}}}));
-//# sourceMappingURL=p-5f716719.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","exports","class_1","hostRef","_this","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","prototype","handleOpenChange","componentDidLoad","popover","Popover","tooltipPositioner","syncOptions","host","addEventListener","hidden","componentDidUpdate","disconnectedCallback","destroy","removeEventListener","slShow","nanoShow","emit","defaultPrevented","slHide","nanoHide","__spreadArray","Array","from","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}::after {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}::after {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}::after {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}::after {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}::after {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}::after {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}::after {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private target: HTMLElement;\n  private tooltip: any;\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    this.host.addEventListener('blur', this.handleBlur, true);\n    this.host.addEventListener('click', this.handleClick, true);\n    this.host.addEventListener('focus', this.handleFocus, true);\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n\n    this.host.removeEventListener('blur', this.handleBlur, true);\n    this.host.removeEventListener('click', this.handleClick, true);\n    this.host.removeEventListener('focus', this.handleFocus, true);\n  }\n\n  /** Shows the tooltip. */\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 slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Shows the tooltip. */\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 slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    const oldTarget = this.target;\n    const newTarget = this.getTarget();\n\n    if (newTarget !== oldTarget) {\n      if (oldTarget) {\n        oldTarget.removeAttribute('aria-describedby');\n      }\n      newTarget.setAttribute('aria-describedby', this.componentId);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              id={this.componentId}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\">{this.content}</slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","exports","class_1","hostRef","_this","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","prototype","handleValueChange","nanoChange","handleSymbolChange","setFocus","rating","focus","removeFocus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","_getRoot","host","shadowRoot","_fixClassNames","ctxClasses","className","split","filter","classStr","match","eles","querySelectorAll","Array","from","map","ele","classList","add","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","dir","ownerDocument","disconnectedCallback","unobserve","componentDidRender","render","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/algolia/algolia-filter.scss?tag=nano-algolia-filter&encapsulation=shadow","src/components/algolia/algolia-filter.tsx"],"names":["algoliaFilterCss","AlgoliaFilter","exports","class_1","hostRef","_this","this","filterId","tplWillRnder","Promise","resolve","tplDidRnder","internalValue","undefined","showFilter","indexResults","filterChanged","filterName","value","operator","storeMethod","handleChangeEvent","vals","getFieldValues","didValueChange","prototype","valueSet","valStr","length","split","foundVals","setFieldValues","then","_","valueChanged","nanoFilterChanged","emit","facetName","viewFilterChange","attachChangeListener","appliedFilterChanged","updateContent","tplUpdate","handleFilterChange","appliedFilters","foundValue_1","find","filter","name","values","outputTo","outputSlot","outputEle","el","templateStr","origFilters","writeTask","innerHTML","tplRenderFn","orig","dyn","selected","Object","assign","dynFilters","nanoTplUpdated","fields","querySelectorAll","i","field","type","select","n","options","push","checked","found","disabled","includes","newVal","hasChanged","attach","addEventListener","removeEventListener","connectedCallback","templateSlot","querySelector","filterIds","replace","componentWillLoad","storeId","ComponentStore","init","globalStoreMethod","componentDidLoad","render","h","Host","class","show-filter","ref","div","Wormhole"],"mappings":"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","sourcesContent":[":host {\n  display: none;\n\n  ::slotted([slot='filter-template']),\n  &::slotted([slot='filter-template']) {\n    display: none !important;\n  }\n}\n\n:host(.show-filter) {\n  display: block;\n}\n","import {\n  Component,\n  h,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  State,\n  EventEmitter,\n  Event,\n  writeTask,\n} from '@stencil/core';\nimport {\n  IndexResult,\n  FilterChangeEventDetail,\n  AlgoliaFacet,\n} from '../../interface';\nimport {\n  SearchChangeEvent,\n  Wormhole,\n  WormholeConsumerConstructor,\n} from '../algolia/algolia-data';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\n\n/**\n * Displays and syncs algolia filters\n * Must be nested within an nano-algolia component.\n * @slot filter-template - Template string (format from nano-algolia 'tplEngine' property).\n * @slot output - A placeholder for template output.\n */\n@Component({\n  tag: 'nano-algolia-filter',\n  shadow: true,\n  styleUrl: 'algolia-filter.scss',\n})\nexport class AlgoliaFilter {\n  @Element() el: HTMLNanoAlgoliaFilterElement;\n\n  private templateStr: string;\n  private templateSlot: HTMLElement;\n  private outputSlot: HTMLElement;\n  private outputEle: HTMLElement;\n  private filterId: string = null;\n  private tplDidRnder;\n  private tplWillRnder = new Promise((resolve) => {\n    this.tplDidRnder = resolve;\n  });\n\n  @State() changeEvent: SearchChangeEvent;\n  @State() internalValue: Array<string> = [undefined];\n  @State() showFilter: boolean = false;\n  @State() indexResults: IndexResult = null;\n  @State() filterChanged: string = null;\n  @State() facets: AlgoliaFacet;\n  @State() tplRenderFn: (...args: any[]) => string;\n  @State() globalStoreMethod: StorageMethods;\n\n  /**\n   * Name of this filter - must match an appropriate algolia facet on a parent nano-algolia index to display\n   */\n  @Prop() filterName: string = null;\n\n  /**\n   * Set values of this filter. Will result in form elements being selected. '|' delimited string or array.\n   */\n  @Prop() value: string | Array<string> = '';\n\n  /**\n   * The internal operator joining filter values.\n   */\n  @Prop() operator: 'or' | 'and' = 'or';\n\n  /**\n   * Store search queries (against this ID) to the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Emitted when the filter value changes\n   */\n  @Event() nanoFilterChanged!: EventEmitter<FilterChangeEventDetail>;\n\n  /**\n   * Emitted when templates are updated\n   */\n  @Event() nanoTplUpdated!: EventEmitter<HTMLNanoAlgoliaFilterElement>;\n\n  // Public facing. When changed attempts to 'check' any relevant fields in the template.\n  @Watch('value')\n  valueSet() {\n    let valStr = this.value as string;\n    let vals;\n\n    if (typeof valStr === 'string')\n      vals = valStr.length ? valStr.split('|') : [];\n    else vals = this.value as Array<string>;\n\n    if (this.didValueChange(vals)) {\n      let foundVals = this.setFieldValues(vals);\n      // found in template, set the internal state (this emits the changed event)\n      if (foundVals && foundVals.length) this.internalValue = vals;\n      // not found in template, wait for it to render.\n      else {\n        this.tplWillRnder.then((_) => {\n          this.setFieldValues(vals);\n          this.internalValue = vals;\n        });\n      }\n    }\n  }\n\n  // Value has changed and is reflected in template. Emit event.\n  @Watch('internalValue')\n  valueChanged() {\n    this.value = this.internalValue;\n    this.nanoFilterChanged.emit({\n      filterId: this.filterId,\n      facetName: this.filterName,\n      value: this.internalValue,\n      operator: this.operator,\n    });\n  }\n\n  @Watch('showFilter')\n  viewFilterChange() {\n    if (this.showFilter) this.attachChangeListener();\n    else this.attachChangeListener(false);\n  }\n\n  // New facets from algolia. Update template\n  @Watch('facets')\n  appliedFilterChanged() {\n    if (\n      this.filterName &&\n      this.filterChanged &&\n      (this.filterChanged !== this.filterId || this.operator === 'and')\n    ) {\n      this.updateContent();\n    }\n  }\n\n  @Watch('tplRenderFn')\n  tplUpdate() {\n    this.updateContent();\n  }\n\n  @Watch('indexResults')\n  handleFilterChange() {\n    if (this.indexResults && this.indexResults.appliedFilters) {\n      const foundValue = this.indexResults.appliedFilters.find(\n        (filter) => filter.name === this.filterName\n      );\n      if (!foundValue) return;\n\n      this.tplWillRnder.then((_) => {\n        let foundVals = this.setFieldValues(foundValue.values);\n        if (foundVals && foundVals.length) this.value = foundVals;\n      });\n    }\n    this.updateContent();\n  }\n\n  private updateContent() {\n    let outputTo = this.outputSlot || this.outputEle;\n    if (!this.el) return;\n\n    // there's no template so show output right away\n    if (!this.templateStr) this.showFilter = true;\n    // there's a template but no index set so hide filters atm\n    else if (\n      !this.filterName ||\n      !outputTo ||\n      (this.templateStr &&\n        (!this.indexResults || !this.indexResults.origFilters[this.filterName]))\n    ) {\n      this.showFilter = false;\n    }\n\n    // there's no output element so nothing else to do\n    if (!outputTo) return;\n\n    // there's no index set atm but get any static filter values so we can apply them\n    if (!this.indexResults) {\n      if (this.templateStr) {\n        writeTask(() => {\n          outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n            orig: {},\n            dyn: {},\n            selected:\n              this.internalValue && this.internalValue.length\n                ? this.internalValue\n                : this.value,\n          });\n          if (!this.value || !this.value.length) this.handleChangeEvent();\n        });\n      } else if (!this.value || !this.value.length) this.handleChangeEvent();\n      return;\n    }\n\n    // everything is in place - render as normal and set values\n    writeTask(() => {\n      outputTo.innerHTML = this.tplRenderFn(this.templateStr, {\n        orig: { ...this.indexResults.origFilters[this.filterName] },\n        dyn: { ...this.indexResults.dynFilters[this.filterName] },\n        selected:\n          this.internalValue && this.internalValue.length\n            ? this.internalValue\n            : this.value,\n      });\n      this.tplDidRnder();\n      this.setFieldValues();\n\n      if (!this.showFilter) this.showFilter = true;\n      this.nanoTplUpdated.emit(this.el);\n    });\n  }\n\n  private handleChangeEvent = () => {\n    let vals = this.getFieldValues();\n    if (this.didValueChange(vals)) {\n      this.internalValue = vals;\n      return true;\n    }\n    return false;\n  };\n\n  // go through form elements and extract their current value\n  private getFieldValues() {\n    let values = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      // If a multi-select, get all selections\n      if (field.type === 'select-multiple') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!select.options[n].selected || !select.options[n].value.length)\n            continue;\n          values.push(select.options[n].value);\n        }\n      } else if (\n        (field.type !== 'checkbox' && field.type !== 'radio') ||\n        (field.checked && field.value.length)\n      ) {\n        values.push(field.value);\n      }\n    }\n    return values;\n  }\n\n  // go through form elements and select / check them as appropriate\n  private setFieldValues(vals?: string[]): void | string[] {\n    vals = vals || this.internalValue;\n    if (!vals) return;\n\n    let found = [];\n    let fields = this.outputSlot.querySelectorAll(\n      'input[type=\"checkbox\"], input[type=\"radio\"], select, nano-select, nano-checkbox'\n    );\n\n    for (let i = 0; i < fields.length; i++) {\n      let field = fields[i] as HTMLInputElement;\n\n      if (\n        field.disabled ||\n        field.type === 'file' ||\n        field.type === 'reset' ||\n        field.type === 'submit' ||\n        field.type === 'button'\n      )\n        continue;\n\n      if (field.type === 'select-multiple' || field.type === 'select-one') {\n        let select: HTMLSelectElement = field as any;\n        for (let n = 0; n < select.options.length; n++) {\n          if (!vals.includes(select.options[n].value))\n            select.options[n].selected = false;\n          else {\n            found.push(select.value);\n            select.options[n].selected = true;\n            if (field.type === 'select-one')\n              select.value = select.options[n].value;\n          }\n        }\n      } else if (\n        ['checkbox', 'radio', 'tag', 'segment', 'segment-pill'].includes(\n          field.type\n        )\n      ) {\n        if (vals.includes(field.value)) {\n          found.push(field.value);\n          field.checked = true;\n        } else if (!vals.length && !field.value.length) {\n          field.checked = true;\n        } else field.checked = false;\n      }\n    }\n    return found;\n  }\n\n  private didValueChange(newVal: Array<string>) {\n    if (!!this.internalValue && !newVal) return true;\n    if (!this.internalValue && !newVal) return false;\n    if (this.internalValue && newVal.length !== this.internalValue.length)\n      return true;\n\n    let hasChanged = false;\n    for (var i = 0; i < newVal.length; i++) {\n      if (\n        !hasChanged &&\n        (!this.internalValue || !this.internalValue.includes(newVal[i]))\n      )\n        hasChanged = true;\n    }\n    return hasChanged;\n  }\n\n  private attachChangeListener(attach: boolean = true) {\n    if (!this.outputSlot) return;\n    if (attach) {\n      this.outputSlot.addEventListener('change', this.handleChangeEvent);\n      this.outputSlot.addEventListener('nanoChange', this.handleChangeEvent);\n    } else {\n      this.outputSlot.removeEventListener('change', this.handleChangeEvent);\n      this.outputSlot.removeEventListener('nanoChange', this.handleChangeEvent);\n    }\n  }\n\n  connectedCallback() {\n    this.templateSlot = this.el.querySelector('[slot=\"filter-template\"]');\n    this.outputSlot = this.el.querySelector('[slot=\"output\"]');\n    this.filterId = this.filterName + '_' + filterIds++;\n\n    if (!!this.templateSlot) {\n      this.templateStr = this.templateSlot.innerHTML;\n      this.templateStr = this.templateStr.replace(/=&gt;/gm, '=>');\n    }\n  }\n\n  componentWillLoad() {\n    if (this.storeId)\n      ComponentStore.init(\n        this,\n        ['value'],\n        this.storeMethod || this.globalStoreMethod,\n        this.storeId\n      );\n  }\n\n  componentDidLoad() {\n    this.updateContent();\n\n    if (\n      this.templateStr &&\n      this.filterName &&\n      this.indexResults &&\n      this.indexResults.origFilters[this.filterName]\n    )\n      this.showFilter = true;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'show-filter': this.showFilter,\n        }}\n      >\n        <div ref={(div) => (this.outputEle = div)}>\n          <slot name=\"output\" />\n        </div>\n      </Host>\n    );\n  }\n}\n\nWormhole(AlgoliaFilter as WormholeConsumerConstructor, [\n  'globalStoreMethod',\n  'indexResults',\n  'filterChanged',\n  'facets',\n  'tplRenderFn',\n  'changeEvent',\n]);\nlet filterIds = 0;\n"]}

package/dist/nano-components/p-6b22f5db.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/sticky/sticker.tsx","src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow"],"names":["_getOffset","ele","parent","parentEle","Document","document","documentElement","getOffset","Sticker","[object Object]","hostRef","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","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","async","incomingTriggerPos","getTriggerPos","includes","triggerPos","top","onScroll","y","window","pageYOffset","scrollTop","handleScrollAway","handleScrollTo","shouldStick","pause","trigger","contentSizeObserver","content","_v","_h","setAttribute","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","split","setOffset","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","addEventListener","passive","capture","removeEventListener","_","oldParent","manageListenersOnParent","oldEle","stickTo","nanoHide","nanoShow","io","root","IntersectionObserver","slice","addEvents","attachScrollListeners","console","error","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","docHeight","HTMLElement","find","test","overflow","scroll","data","scrollAmt","parentBounding","rootBounds","getScrollParent","createElement","classList","add","positionChange","quietModeChange","handleParentEvents","querySelectorAll","filter","findIndex","stickerResizeListener","updateTriggerOffset","stickToChange","setupIO","debounce","dir","ownerDocument","setTimeout","bootstrapGurantor","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["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/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","@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"]}

package/dist/nano-components/p-6ba91d36.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow"],"names":["ResizeObserve","[object Object]","hostRef","this","classNames","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","includes","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","el","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","ref","div","Skeleton","animated","skeleton","animate"],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { debounce } from '../../utils/utils';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-resize-observe',\n  shadow: true,\n  styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private el: HTMLDivElement;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n\n  /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n    if (!this.ro) this.attachRO();\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n  };\n\n  private applyChanges(changes: StateMaps) {\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) classNames.push(st);\n          else classNames = classNames.filter((cl) => cl !== st);\n        });\n      });\n    });\n    this.classNames = classNames;\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    this.ro = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        this.currentWidth = entry.contentRect.width;\n        this.currentHeight = entry.contentRect.height;\n      }\n    });\n    this.ro.observe(this.el);\n  }\n\n  connectedCallback() {\n    this.assessChanges = debounce(this.assessChanges, 50);\n  }\n\n  componentDidLoad() {\n    if (!this.states) return;\n    if (!this.currentWidth || !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.el.getBoundingClientRect();\n        this.currentWidth = width;\n        this.currentHeight = height;\n      });\n    }\n    this.statesChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [this.classNames.join(' ')]: true,\n        }}\n      >\n        <div ref={(div) => (this.el = div)}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\" />\n      </div>\n    );\n  }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n  --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  height: 1em;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  to {\n    background-position: -200% 0;\n  }\n}\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/aspect-ratio/aspect-ratio.scss?tag=nano-aspect-ratio&encapsulation=shadow","src/components/aspect-ratio/aspect-ratio.tsx"],"names":["aspectRatioCss","AspectRadio","exports","class_1","hostRef","_this","this","aspectRatio","fit","handleSlotChange","setAspectRatio","prototype","handleAspectRatioChange","split","x","parseInt","y","base","style","paddingBottom","render","h","ref","el","part","class","aspect-ratio","aspect-ratio--cover","aspect-ratio--contain","onSlotchange"],"mappings":"0IAAA,IAAMA,EAAiB,svBCaVC,EAAWC,EAAA,oBAAA,WALxB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,eAUUA,KAAAC,YAAc,OAGdD,KAAAE,IAA2B,QAO3BF,KAAAG,iBAAmB,WACzBJ,EAAKK,kBALPP,EAAAQ,UAAAC,wBAAA,WACEN,KAAKI,kBAOCP,EAAAQ,UAAAD,eAAA,WACN,IAAMG,EAAQP,KAAKC,YAAYM,MAAM,KACrC,IAAMC,EAAIC,SAASF,EAAM,IACzB,IAAMG,EAAID,SAASF,EAAM,IACzBP,KAAKW,KAAKC,MAAMC,cAAgBL,GAAKE,EAAQA,EAAIF,EAAK,IAAG,IAAM,MAGjEX,EAAAQ,UAAAS,OAAA,WAAA,IAAAf,EAAAC,KACE,OACEe,EAAA,MAAA,CACEC,IAAK,SAACC,GAAE,OAAMlB,EAAKY,KAAOM,GAC1BC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,sBAAuBrB,KAAKE,MAAQ,QACpCoB,wBAAyBtB,KAAKE,MAAQ,YAGxCa,EAAA,OAAA,CAAMQ,aAAcvB,KAAKG,uKArCT","sourcesContent":[":host {\n  display: block;\n}\n\n.aspect-ratio {\n  position: relative;\n\n  ::slotted(*) {\n    position: absolute !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n  }\n\n  &--cover {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: cover !important;\n    }\n  }\n\n  &--contain {\n    ::slotted(embed),\n    ::slotted(iframe),\n    ::slotted(img),\n    ::slotted(video) {\n      object-fit: contain !important;\n    }\n  }\n}\n","import { Component, Prop, Watch, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Displays media in the desired aspect ratio.\n * You can slot in any replaced element, including `<iframe>`, `<img>`, and `<video>`.\n * As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container.\n * The default aspect ratio is 16:9.\n */\n@Component({\n  tag: 'nano-aspect-ratio',\n  styleUrl: 'aspect-ratio.scss',\n  shadow: true,\n})\nexport class AspectRadio implements ComponentInterface {\n  private base: HTMLElement;\n\n  /** The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`.\n   * Ratios not in this format will be ignored. */\n  @Prop() aspectRatio = '16:9';\n\n  /** Determines how content will be resized to fit its container. */\n  @Prop() fit: 'cover' | 'contain' = 'cover';\n\n  @Watch('aspectRatio')\n  handleAspectRatioChange() {\n    this.setAspectRatio();\n  }\n\n  private handleSlotChange = () => {\n    this.setAspectRatio();\n  };\n\n  private setAspectRatio() {\n    const split = this.aspectRatio.split(':');\n    const x = parseInt(split[0]);\n    const y = parseInt(split[1]);\n    this.base.style.paddingBottom = x && y ? `${(y / x) * 100}%` : null;\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.base = el)}\n        part=\"base\"\n        class={{\n          'aspect-ratio': true,\n          'aspect-ratio--cover': this.fit === 'cover',\n          'aspect-ratio--contain': this.fit === 'contain',\n        }}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n    );\n  }\n}\n"]}

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

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