@nanoporetech-digital/components 1.13.21 → 1.15.0

package/dist/nano-components/{p-d0c501a0.entry.js.map → p-c3f861c5.entry.js.map}

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

package/dist/nano-components/{p-21f484a3.system.entry.js → p-c655e010.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-2d59dda3.system.js","./p-89a5c54a.system.js"],(function(t){"use strict";var o,e,r,i;return{setters:[function(t){o=t.r;e=t.h;r=t.g},function(t){i=t.h}],execute:function(){var n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;color:var(--theme-color)}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var s=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!i(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":t,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)]))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());s.style=n}}}));
-//# sourceMappingURL=p-21f484a3.system.entry.js.map
+System.register(["./p-af9f6453.system.js","./p-94f03788.system.js"],(function(t){"use strict";var o,e,r,i;return{setters:[function(t){o=t.r;e=t.h;r=t.g},function(t){i=t.h}],execute:function(){var n=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:block;--nano-loader-base:#4a4a4a;--nano-loader-tint:#7d7d7d;--theme-color:#fff;--theme-tint-color:#90c6e7;--scrim-color:0, 0, 0;--scrim-direction:90deg;--scrim-opacity-from:0.25;--scrim-opacity-to:0.7;--padding:0;color:var(--theme-color)}:host([theme=light]){--nano-loader-base:#fff;--nano-loader-tint:white;--theme-color:#4a4a4a;--scrim-color:255, 255, 255;--scrim-opacity-from:0.25;--scrim-opacity-to:1;--scrim-direction:270deg;color:var(--theme-color)}:host([theme=light]) .hero__primary-content{--color:#4a4a4a}.hero{position:relative}.hero--rtl{--scrim-direction:270deg}.hero--secondary:not(.hero--iconbox){--scrim-direction:0deg}.hero__bg-wrap{overflow:hidden}.hero__bg-slot{position:absolute;top:0;bottom:0;left:0;right:0}.hero__ctas{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:32px 32px 0;margin-bottom:-64px;position:relative;z-index:1}@media (max-width: 52em){.hero__ctas{display:none}}@media (max-width: 58em){.hero__ctas{margin-bottom:-48px}}.hero__ctas ::slotted(a.button[slot=secondary-ctas]),.hero__ctas::slotted(a.button[slot=secondary-ctas]){padding:0.25rem 0.5rem !important;font-size:0.875rem !important;margin:0 0.25rem !important}.hero__img{display:block;--padding:inherit}.hero__breadcrumbs{display:none;margin:20px 14px 0;line-height:14px}.hero--breadcrumb .hero__breadcrumbs{display:block}.is-xl .hero__breadcrumbs{margin:0 50px;max-width:50%}.is-xxl .hero__breadcrumbs{margin:0 83px}.hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero__breadcrumbs::slotted(*[slot=breadcrumb]){font-size:0.85rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-stretch:125%;display:inline-block;margin-bottom:16px;position:relative;z-index:2}.hero--hasbg .hero__breadcrumbs ::slotted(*[slot=breadcrumb]),.hero--hasbg .hero__breadcrumbs::slotted(*[slot=breadcrumb]){text-shadow:1px 1px rgba(0, 0, 0, 0.15)}.hero__breadcrumbs ::slotted(a[slot=breadcrumb]),.hero__breadcrumbs::slotted(a[slot=breadcrumb]){color:var(--theme-tint-color) !important;cursor:pointer}.hero__breadcrumbs ::slotted(.slash[slot=breadcrumb]),.hero__breadcrumbs::slotted(.slash[slot=breadcrumb]){color:var(--theme-color);position:relative;margin:0 0.5rem;display:inline-block}.hero__scrim{position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;background:-webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));background:linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%)}.hero--scrim .hero__scrim{background:none}.hero__content{max-width:1440px;--grid-row-gap:0;margin:0 auto;position:relative}.hero__content.is-xl{margin-top:50px;max-width:1540px}.hero__content.is-xxl{margin-top:83px;max-width:1606px}.hero__primary{margin:16px}.hero--breadcrumb .hero__primary{margin:0 16px}.hero--backbtn .hero__primary{margin-left:0}.hero__primary ::slotted(nano-icon-button[slot=back-btn]),.hero__primary::slotted(nano-icon-button[slot=back-btn]){font-size:2rem}.is-xl .hero__primary{margin:0 0 50px 50px}.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:-3rem;margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.is-xl .hero__primary ::slotted(nano-icon-button[slot=back-btn]),.is-xl .hero__primary::slotted(nano-icon-button[slot=back-btn]){margin-left:unset;margin-right:unset;-webkit-margin-start:-3rem;margin-inline-start:-3rem;-webkit-margin-end:0;margin-inline-end:0}}.is-xxl .hero__primary{margin:0 0 83px 83px}.hero__primary-content{max-width:45rem;--color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex}.hero--backbtn .hero__primary-content>div{padding:10px 0 0 0}.hero__primary-content ::slotted(h1[slot=primary-content]),.hero__primary-content::slotted(h1[slot=primary-content]){line-height:26px !important;margin-top:0 !important;margin-bottom:18px !important;font-size:2rem !important}.is-xl .hero__primary-content ::slotted(h1[slot=primary-content]),.is-xl .hero__primary-content::slotted(h1[slot=primary-content]){line-height:31px !important;margin-bottom:30px !important}.is-xl .hero__primary-content ::slotted(.button[slot=primary-content]),.is-xl .hero__primary-content::slotted(.button[slot=primary-content]){margin-top:20px !important}.hero__secondary{display:none;height:100%;padding:0 14px 20px}.hero--secondary .hero__secondary{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.is-xl .hero__secondary{padding:0 50px 50px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.is-xxl .hero__secondary{padding:0 83px 83px}.hero__icon-box{background:rgba(0, 0, 0, 0.7);padding:24px;width:100%;margin-bottom:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:white}.is-xl .hero__icon-box{max-width:410px;-webkit-box-flex:0;-ms-flex:0 1 410px;flex:0 1 410px}.hero__icon-box::slotted([slot=icon-box-item] nano-icon){color:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px}.hero__icon-box ::slotted([slot=icon-box-item]){--nano-color-base:var(--theme-tint-color);--nano-icon-size:32px;--nano-icon-margin-end:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.8125rem;margin-bottom:20px}.hero__icon-box ::slotted(.last[slot=icon-box-item]),.hero__icon-box::slotted(.last[slot=icon-box-item]){margin-bottom:0}.hero__quote-content{margin-top:auto;text-align:center;width:100%}.is-xl .hero__quote-content{max-width:500px;-webkit-box-flex:0;-ms-flex:0 1 500px;flex:0 1 500px;text-align:initial}.hero__quote::before,.hero__quote::after{content:'\"';font-size:2.5rem;font-weight:700;font-style:italic;color:#abb6b8;display:inline}.hero__quote ::slotted([slot=quote]),.hero__quote::slotted([slot=quote]){font-size:32px;font-weight:300;font-style:italic;display:inline}.is-xl .hero__quote ::slotted([slot=quote]),.is-xl .hero__quote::slotted([slot=quote]){font-size:42px}.hero__quote-author{text-align:right;text-align:end;font-size:1rem;opacity:0.8}.hero--sub .hero__content.is-xl{margin-top:40px}.hero--sub .hero__content.is-xl .hero__primary{margin:0 0 40px 50px}.hero--sub .hero__content.is-xl .hero__secondary{padding:0 50px 50px 40px}.hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(.button[slot=primary-content]){margin-top:8px !important}.hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]),.hero--sub .hero__content.is-xl::slotted(h1[slot=primary-content]){margin-bottom:18px !important}.hero--sub .hero__content.is-xxl .hero__primary{margin:0 0 40px 83px}.hero--sub .hero__content.is-xxl .hero__secondary{padding:0 83px 83px 40px}";var s=t("nano_hero",function(){function t(t){var r=this;o(this,t);this.isLegacy=false;this.imgSrcSet=null;this.largeScreenBP=900;this.theme="dark";this.level="top";this.HeroContent=function(){return[!r.hasIconBox&&r.hasCtas?e("div",{class:"hero__ctas"},e("slot",{name:"secondary-ctas"})):"",e("div",{class:"hero__scrim"},e("slot",{name:"scrim"})),e("nano-grid",{class:"hero__content",xlCols:2,xlSize:r.largeScreenBP},e("nano-grid-item",{gridStates:"xl-col-span-2"},e("div",{class:"hero__breadcrumbs"},e("slot",{name:"breadcrumb"}))),e("nano-grid-item",{gridStates:r.hasSecondaryContent?"xl-col-span-1 xl-col-start-1 xl-row-start-2":"xl-col-span-2 xl-col-start-1 xl-row-start-2"},e("div",{class:"hero__primary"},e("div",{class:"hero__primary-content"},e("slot",{name:"back-btn"}),e("div",null,e("slot",{name:"primary-content"}))))),r.hasSecondaryContent&&e("nano-grid-item",{gridStates:"xl-col-span-1 xl-col-start-2 xl-row-start-2"},e("div",{class:"hero__secondary"},e("slot",{name:"secondary-content"}),r.hasIconBox&&e("div",{class:"hero__icon-box"},e("slot",{name:"icon-box"}),e("slot",{name:"icon-box-item"})),r.hasQuote&&e("div",{class:"hero__quote-content"},e("span",{class:"hero__quote"},e("slot",{name:"quote"})),e("div",{class:"hero__quote-author"},e("slot",{name:"quote-author"}))))))]}}t.prototype.breadCrumbChange=function(){this.breadCrumbs.filter((function(t){return t.tagName==="A"&&!t.nextElementSibling.classList.contains("slash")})).forEach((function(t){t.insertAdjacentHTML("afterend",'<span slot="breadcrumb" class="slash">/</span>')}))};t.prototype.iconBoxItemChange=function(){this.iconBoxItems.forEach((function(t){return t.classList.remove("last")}));if(this.iconBoxItems[this.iconBoxItems.length-1]&&this.iconBoxItems[this.iconBoxItems.length-1].classList)this.iconBoxItems[this.iconBoxItems.length-1].classList.add("last")};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var o=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));o.observe(this.host,{childList:true})};t.prototype.processSlottedContent=function(){this.hasCtas=!!this.host.querySelector('[slot="secondary-ctas"]');this.iconBoxItems=Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));this.hasIconBox=!!this.host.querySelector('[slot="icon-box"]')||!!this.iconBoxItems.length;this.hasScrim=!!this.host.querySelector('[slot="scrim"]');this.breadCrumbs=Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));this.hasSecondaryContent=!!this.host.querySelector('[slot="icon-box"]')||!!this.host.querySelector('[slot="quote"]')||!!this.host.querySelector('[slot="icon-box-item"]')||!!this.host.querySelector('[slot="secondary-content"]');this.hasBg=!!this.host.querySelector('[slot="background"]')||!!this.imgSrc;this.hasBackBtn=!!this.host.querySelector('[slot="back-btn"]');this.hasQuote=!!this.host.querySelector('[slot="quote"]')};t.prototype.connectedCallback=function(){this.isLegacy=!i(this.host)};t.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){this.slotChangeObserver()};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";return e("div",{class:{hero:true,"hero--light":this.theme==="light","hero--secondary":this.hasSecondaryContent,"hero--iconbox":this.hasIconBox,"hero--rtl":t,"hero--scrim":this.hasScrim,"hero--legacy":this.isLegacy,"hero--breadcrumb":!!this.breadCrumbs.length,"hero--hasbg":this.hasBg,"hero--backbtn":this.hasBackBtn,"hero--sub":this.level==="sub"}},e("div",{class:"hero__bg-wrap"},!!this.imgSrc&&e("nano-img",{class:"hero__img",lazy:false,background:true,srcSet:this.imgSrcSet,src:this.imgSrc},e(this.HeroContent,null)),!this.imgSrc&&[e("div",{class:"hero__bg-slot"},e("slot",{name:"background"})),e(this.HeroContent,null)]))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{breadCrumbs:["breadCrumbChange"],iconBoxItems:["iconBoxItemChange"]}},enumerable:false,configurable:true});return t}());s.style=n}}}));
+//# sourceMappingURL=p-c655e010.system.entry.js.map

package/dist/nano-components/{p-21f484a3.system.entry.js.map → p-c655e010.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n\n  color: var(--theme-color);\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']),\n    &::slotted(a.button[slot='secondary-ctas']) {\n      padding: 0.25rem 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin: 0 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']),\n    &::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']),\n    &::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']),\n    &::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n        rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-width: 1440px;\n\n    --grid-row-gap: 0;\n\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']),\n    &::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot='back-btn']),\n      &::slotted(nano-icon-button[slot='back-btn']) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n\n  &__primary-content {\n    max-width: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']),\n    &::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-top: 0 !important;\n      margin-bottom: 18px !important;\n      font-size: 2rem !important;\n    }\n\n    .is-xl & {\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-bottom: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot='icon-box-item'] nano-icon) {\n      color: var(--theme-tint-color);\n\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-bottom: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']),\n    &::slotted(.last[slot='icon-box-item']) {\n      margin-bottom: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n\n    ::slotted([slot='quote']),\n    &::slotted([slot='quote']) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\n    }\n  }\n\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 8px !important;\n      }\n\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        margin-bottom: 18px !important;\n      }\n    }\n\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <div\n        class={{\n          hero: true,\n          'hero--light': this.theme === 'light',\n          'hero--secondary': this.hasSecondaryContent,\n          'hero--iconbox': this.hasIconBox,\n          'hero--rtl': rtl,\n          'hero--scrim': this.hasScrim,\n          'hero--legacy': this.isLegacy,\n          'hero--breadcrumb': !!this.breadCrumbs.length,\n          'hero--hasbg': this.hasBg,\n          'hero--backbtn': this.hasBackBtn,\n          'hero--sub': this.level === 'sub',\n        }}\n      >\n        <div class=\"hero__bg-wrap\">\n          {!!this.imgSrc && (\n            <nano-img\n              class=\"hero__img\"\n              lazy={false}\n              background\n              srcSet={this.imgSrcSet}\n              src={this.imgSrc}\n            >\n              <this.HeroContent />\n            </nano-img>\n          )}\n          {!this.imgSrc && [\n            <div class=\"hero__bg-slot\">\n              <slot name=\"background\" />\n            </div>,\n            <this.HeroContent />,\n          ]}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/hero/hero.scss?tag=nano-hero&encapsulation=shadow","src/components/hero/hero.tsx"],"names":["heroCss","Hero","exports","class_1","hostRef","_this","this","isLegacy","imgSrcSet","largeScreenBP","theme","level","HeroContent","hasIconBox","hasCtas","h","class","name","xlCols","xlSize","gridStates","hasSecondaryContent","hasQuote","prototype","breadCrumbChange","breadCrumbs","filter","crumb","tagName","nextElementSibling","classList","contains","forEach","insertAdjacentHTML","iconBoxItemChange","iconBoxItems","item","remove","length","add","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","host","childList","querySelector","Array","from","querySelectorAll","hasScrim","hasBg","imgSrc","hasBackBtn","connectedCallback","hasShadowDom","disconnectedCallback","componentDidLoad","componentWillLoad","render","rtl","dir","ownerDocument","hero","hero--light","hero--secondary","hero--iconbox","hero--rtl","hero--scrim","hero--legacy","hero--breadcrumb","hero--hasbg","hero--backbtn","hero--sub","lazy","background","srcSet","src"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n\n:host {\n  /**\n   * @prop --nano-loader-base: Base colour of nano-skeleton. Default depends on theme;\n   * @prop --nano-loader-tint: Tint colour of nano-skeleton. Default depends on theme;\n   * @prop --theme-color: Text color. Default depends on theme;\n   * @prop --theme-tint-color: Color used for bread crumbs and icons. Defaults to #{$color-lightblue};\n   * @prop --scrim-color: Color of the gradient covering the background. Default depends on theme;\n   * @prop --scrim-direction: Direction of the gradient covering the background. Default what content slots are present;\n   * @prop --scrim-opacity-from: Starting opactiy of the gradient covering the background. Default .25;\n   * @prop --scrim-opacity-to: Final opactiy of the gradient covering the background. Default depends on `theme`;\n  */\n\n  display: block;\n\n  --nano-loader-base: #{$color-black};\n  --nano-loader-tint: #{lighten($color-black, 20%)};\n  --theme-color: #{$color-white};\n  --theme-tint-color: #{$color-lightblue};\n  --scrim-color: 0, 0, 0;\n  --scrim-direction: 90deg;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 0.7;\n  --padding: 0;\n\n  color: var(--theme-color);\n}\n\n:host([theme='light']) {\n  --nano-loader-base: #{$color-white};\n  --nano-loader-tint: #{lighten($color-white, 20%)};\n  --theme-color: #{$color-black};\n  --scrim-color: 255, 255, 255;\n  --scrim-opacity-from: 0.25;\n  --scrim-opacity-to: 1;\n  --scrim-direction: 270deg;\n\n  color: var(--theme-color);\n\n  .hero__primary-content {\n    --color: #{$color-black};\n  }\n}\n\n.hero {\n  position: relative;\n\n  &--rtl {\n    --scrim-direction: 270deg;\n  }\n\n  &--secondary:not(.hero--iconbox) {\n    --scrim-direction: 0deg;\n  }\n\n  &__bg-wrap {\n    overflow: hidden;\n  }\n\n  &__bg-slot {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n  }\n\n  &__ctas {\n    @media (max-width: 52em) {\n      display: none;\n    }\n\n    @media (max-width: 58em) {\n      margin-bottom: -48px;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    padding: 32px 32px 0;\n    margin-bottom: -64px;\n    position: relative;\n    z-index: 1;\n\n    ::slotted(a.button[slot='secondary-ctas']),\n    &::slotted(a.button[slot='secondary-ctas']) {\n      padding: 0.25rem 0.5rem !important;\n      font-size: 0.875rem !important;\n      margin: 0 0.25rem !important;\n    }\n  }\n\n  &__img {\n    display: block;\n\n    --padding: inherit;\n  }\n\n  &__breadcrumbs {\n    display: none;\n    margin: 20px 14px 0;\n    line-height: 14px;\n\n    .hero--breadcrumb & {\n      display: block;\n    }\n\n    .is-xl & {\n      margin: 0 50px;\n      max-width: 50%;\n    }\n\n    .is-xxl & {\n      margin: 0 83px;\n    }\n\n    ::slotted(*[slot='breadcrumb']),\n    &::slotted(*[slot='breadcrumb']) {\n      font-size: 0.85rem;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      font-weight: 600;\n      font-stretch: 125%;\n      display: inline-block;\n      margin-bottom: 16px;\n      position: relative;\n      z-index: 2;\n\n      .hero--hasbg & {\n        text-shadow: 1px 1px rgb(0 0 0 / 15%);\n      }\n    }\n\n    ::slotted(a[slot='breadcrumb']),\n    &::slotted(a[slot='breadcrumb']) {\n      color: var(--theme-tint-color) !important;\n      cursor: pointer;\n    }\n\n    ::slotted(.slash[slot='breadcrumb']),\n    &::slotted(.slash[slot='breadcrumb']) {\n      color: var(--theme-color);\n      position: relative;\n      margin: 0 0.5rem;\n      display: inline-block;\n    }\n  }\n\n  &__scrim {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: 0;\n    background:\n      linear-gradient(\n        var(--scrim-direction),\n        rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%,\n        rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%\n      );\n\n    .hero--scrim & {\n      background: none;\n    }\n  }\n\n  &__content {\n    max-width: 1440px;\n\n    --grid-row-gap: 0;\n\n    margin: 0 auto;\n    position: relative;\n\n    &.is-xl {\n      margin-top: 50px;\n      max-width: 1540px;\n    }\n\n    &.is-xxl {\n      margin-top: 83px;\n      max-width: 1606px;\n    }\n  }\n\n  &__primary {\n    margin: 16px;\n\n    .hero--breadcrumb & {\n      margin: 0 16px;\n    }\n\n    .hero--backbtn & {\n      margin-left: 0;\n    }\n\n    ::slotted(nano-icon-button[slot='back-btn']),\n    &::slotted(nano-icon-button[slot='back-btn']) {\n      font-size: 2rem;\n    }\n\n    .is-xl & {\n      margin: 0 0 50px 50px;\n\n      ::slotted(nano-icon-button[slot='back-btn']),\n      &::slotted(nano-icon-button[slot='back-btn']) {\n        @include margin(0, 0, 0, -3rem);\n      }\n    }\n\n    .is-xxl & {\n      margin: 0 0 83px 83px;\n    }\n  }\n\n  &__primary-content {\n    max-width: 45rem;\n\n    --color: #fff;\n\n    display: flex;\n\n    .hero--backbtn & {\n      > div {\n        padding: 10px 0 0 0;\n      }\n    }\n\n    ::slotted(h1[slot='primary-content']),\n    &::slotted(h1[slot='primary-content']) {\n      line-height: 26px !important;\n      margin-top: 0 !important;\n      margin-bottom: 18px !important;\n      font-size: 2rem !important;\n    }\n\n    .is-xl & {\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        line-height: 31px !important;\n        margin-bottom: 30px !important;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 20px !important;\n      }\n    }\n  }\n\n  &__secondary {\n    display: none;\n    height: 100%;\n    padding: 0 14px 20px;\n\n    .hero--secondary & {\n      display: flex;\n      align-items: center;\n    }\n\n    .is-xl & {\n      padding: 0 50px 50px;\n      justify-content: flex-end;\n    }\n\n    .is-xxl & {\n      padding: 0 83px 83px;\n    }\n  }\n\n  &__icon-box {\n    background: rgba(0, 0, 0, 0.7);\n    padding: 24px;\n    width: 100%;\n    margin-bottom: auto;\n    display: flex;\n    flex-direction: column;\n    color: white;\n\n    .is-xl & {\n      max-width: 410px;\n      flex: 0 1 410px;\n    }\n\n    // for silly IE\n    &::slotted([slot='icon-box-item'] nano-icon) {\n      color: var(--theme-tint-color);\n\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n    }\n\n    ::slotted([slot='icon-box-item']) {\n      --nano-color-base: var(--theme-tint-color);\n      --nano-icon-size: 32px;\n      --nano-icon-margin-end: 20px;\n\n      display: flex;\n      align-items: center;\n      font-size: 0.8125rem;\n      margin-bottom: 20px;\n    }\n\n    ::slotted(.last[slot='icon-box-item']),\n    &::slotted(.last[slot='icon-box-item']) {\n      margin-bottom: 0;\n    }\n  }\n\n  &__quote-content {\n    margin-top: auto;\n    text-align: center;\n    width: 100%;\n\n    .is-xl & {\n      max-width: 500px;\n      flex: 0 1 500px;\n      text-align: initial;\n    }\n  }\n\n  &__quote {\n    &::before,\n    &::after {\n      content: '\"';\n      font-size: 2.5rem;\n      font-weight: 700;\n      font-style: italic;\n      color: #abb6b8;\n      display: inline;\n    }\n\n    ::slotted([slot='quote']),\n    &::slotted([slot='quote']) {\n      font-size: 32px;\n      font-weight: 300;\n      font-style: italic;\n      display: inline;\n\n      .is-xl & {\n        font-size: 42px;\n      }\n    }\n  }\n\n  &__quote-author {\n    text-align: right;\n    text-align: end;\n    font-size: 1rem;\n    opacity: 0.8;\n  }\n\n  &--sub {\n    .hero__content.is-xl {\n      margin-top: 40px;\n\n      .hero__primary {\n        margin: 0 0 40px 50px;\n      }\n\n      .hero__secondary {\n        padding: 0 50px 50px 40px;\n      }\n\n      ::slotted(.button[slot='primary-content']),\n      &::slotted(.button[slot='primary-content']) {\n        margin-top: 8px !important;\n      }\n\n      ::slotted(h1[slot='primary-content']),\n      &::slotted(h1[slot='primary-content']) {\n        margin-bottom: 18px !important;\n      }\n    }\n\n    .hero__content.is-xxl {\n      .hero__primary {\n        margin: 0 0 40px 83px;\n      }\n\n      .hero__secondary {\n        padding: 0 83px 83px 40px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  ComponentInterface,\n  VNode,\n  State,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { hasShadowDom } from '../../utils';\n\n/**\n * Hero components are designed to be used once per content page to add visual impact to the introductory section of a page.\n * @slot primary-content - title, leading paragraph and CTA\n * @slot breadcrumb - each individual bread crumb should be assigned seperately\n * @slot secondary-content - free form secondary content.\n * @slot icon-box - free form icon box container\n * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.\n * @slot secondary-ctas - CTAs. each individual button should be assigned seperately\n * @slot quote - quote content\n * @slot quote-author - quote author\n * @slot scrim - optional background overlay (e.g. faded colour or gradient)\n * @slot background - custom background. Only active when img-src is empty\n * @slot back-btn - a back button.\n */\n@Component({\n  tag: 'nano-hero',\n  styleUrl: 'hero.scss',\n  shadow: true,\n})\nexport class Hero implements ComponentInterface {\n  private mo?: MutationObserver;\n  private isLegacy = false;\n\n  @Element() host: HTMLNanoHeroElement;\n\n  @State() hasIconBox: boolean;\n  @State() hasScrim: boolean;\n  @State() hasSecondaryContent: boolean;\n  @State() hasQuote: boolean;\n  @State() hasBg: boolean;\n  @State() hasBackBtn: boolean;\n  @State() hasCtas: boolean;\n  @State() breadCrumbs: Element[];\n  @Watch('breadCrumbs')\n  breadCrumbChange() {\n    // safari doesn't support ::slotted()::after ... so this :/\n    this.breadCrumbs\n      .filter(\n        (crumb) =>\n          crumb.tagName === 'A' &&\n          !crumb.nextElementSibling.classList.contains('slash')\n      )\n      .forEach((crumb) => {\n        crumb.insertAdjacentHTML(\n          'afterend',\n          '<span slot=\"breadcrumb\" class=\"slash\">/</span>'\n        );\n      });\n  }\n  @State() iconBoxItems: Element[];\n  @Watch('iconBoxItems')\n  iconBoxItemChange() {\n    this.iconBoxItems.forEach((item) => item.classList.remove('last'));\n    if (\n      this.iconBoxItems[this.iconBoxItems.length - 1] &&\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList\n    )\n      this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');\n  }\n\n  /** src for backgronund image. For more control use the `background` slot instead. */\n  @Prop() imgSrc?: string;\n\n  /** Optional list string providing media sizes with corresponding image srcs.\n   * i.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"` */\n  @Prop() imgSrcSet?: string = null;\n\n  /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */\n  @Prop() largeScreenBP: number = 900;\n\n  /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */\n  @Prop() theme: 'dark' | 'light' = 'dark';\n\n  /** Set the content structure level of the hero. Defaults to 'top'  */\n  @Prop() level: 'top' | 'sub' = 'top';\n\n  private slotChangeObserver() {\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.host, { childList: true });\n  }\n\n  private processSlottedContent() {\n    this.hasCtas = !!this.host.querySelector('[slot=\"secondary-ctas\"]');\n    this.iconBoxItems = Array.from(\n      this.host.querySelectorAll('[slot=\"icon-box-item\"]')\n    );\n    this.hasIconBox =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.iconBoxItems.length;\n    this.hasScrim = !!this.host.querySelector('[slot=\"scrim\"]');\n    this.breadCrumbs = Array.from(\n      this.host.querySelectorAll('[slot=\"breadcrumb\"]')\n    );\n    this.hasSecondaryContent =\n      !!this.host.querySelector('[slot=\"icon-box\"]') ||\n      !!this.host.querySelector('[slot=\"quote\"]') ||\n      !!this.host.querySelector('[slot=\"icon-box-item\"]') ||\n      !!this.host.querySelector('[slot=\"secondary-content\"]');\n    this.hasBg =\n      !!this.host.querySelector('[slot=\"background\"]') || !!this.imgSrc;\n    this.hasBackBtn = !!this.host.querySelector('[slot=\"back-btn\"]');\n    this.hasQuote = !!this.host.querySelector('[slot=\"quote\"]');\n  }\n\n  connectedCallback() {\n    this.isLegacy = !hasShadowDom(this.host);\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  private HeroContent = (): VNode[] => {\n    return [\n      !this.hasIconBox && this.hasCtas ? (\n        <div class=\"hero__ctas\">\n          <slot name=\"secondary-ctas\" />\n        </div>\n      ) : (\n        ''\n      ),\n      <div class=\"hero__scrim\">\n        <slot name=\"scrim\" />\n      </div>,\n      <nano-grid class=\"hero__content\" xlCols={2} xlSize={this.largeScreenBP}>\n        <nano-grid-item gridStates=\"xl-col-span-2\">\n          <div class=\"hero__breadcrumbs\">\n            <slot name=\"breadcrumb\" />\n          </div>\n        </nano-grid-item>\n        <nano-grid-item\n          gridStates={\n            this.hasSecondaryContent\n              ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'\n              : 'xl-col-span-2 xl-col-start-1 xl-row-start-2'\n          }\n        >\n          <div class=\"hero__primary\">\n            <div class=\"hero__primary-content\">\n              <slot name=\"back-btn\" />\n              <div>\n                <slot name=\"primary-content\" />\n              </div>\n            </div>\n          </div>\n        </nano-grid-item>\n        {this.hasSecondaryContent && (\n          <nano-grid-item gridStates=\"xl-col-span-1 xl-col-start-2 xl-row-start-2\">\n            <div class=\"hero__secondary\">\n              <slot name=\"secondary-content\" />\n              {this.hasIconBox && (\n                <div class=\"hero__icon-box\">\n                  <slot name=\"icon-box\" />\n                  <slot name=\"icon-box-item\" />\n                </div>\n              )}\n              {this.hasQuote && (\n                <div class=\"hero__quote-content\">\n                  <span class=\"hero__quote\">\n                    <slot name=\"quote\" />\n                  </span>\n                  <div class=\"hero__quote-author\">\n                    <slot name=\"quote-author\" />\n                  </div>\n                </div>\n              )}\n            </div>\n          </nano-grid-item>\n        )}\n      </nano-grid>,\n    ];\n  };\n\n  render() {\n    const rtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <div\n        class={{\n          hero: true,\n          'hero--light': this.theme === 'light',\n          'hero--secondary': this.hasSecondaryContent,\n          'hero--iconbox': this.hasIconBox,\n          'hero--rtl': rtl,\n          'hero--scrim': this.hasScrim,\n          'hero--legacy': this.isLegacy,\n          'hero--breadcrumb': !!this.breadCrumbs.length,\n          'hero--hasbg': this.hasBg,\n          'hero--backbtn': this.hasBackBtn,\n          'hero--sub': this.level === 'sub',\n        }}\n      >\n        <div class=\"hero__bg-wrap\">\n          {!!this.imgSrc && (\n            <nano-img\n              class=\"hero__img\"\n              lazy={false}\n              background\n              srcSet={this.imgSrcSet}\n              src={this.imgSrc}\n            >\n              <this.HeroContent />\n            </nano-img>\n          )}\n          {!this.imgSrc && [\n            <div class=\"hero__bg-slot\">\n              <slot name=\"background\" />\n            </div>,\n            <this.HeroContent />,\n          ]}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,e as s,g as n}from"./p-bb0619e6.js";import{p as a,a as o,c as h}from"./p-6ecf2f5c.js";import{c as d}from"./p-d3af43d2.js";const r={d:"(\\d{1,2})",m:"(\\d{1,2})",y:"(\\d{4})"};let l=0,c=class{constructor(e){t(this,e),this.nanoChange=i(this,"nanoChange",7),this.nanoValidate=i(this,"nanoValidate",7),this.directInput=!1,this.dateOrderIndeces={d:0,m:1,y:3},this.inputId="nano-input-"+l++,this.locale=window.navigator.languages||window.navigator.language||void 0,this._invalid=!1,this.helperText=!0,this.helperTextFormat={year:"numeric",month:"long",day:"numeric"},this.floatLabel=!1,this.name=this.inputId,this.readonly=!1,this.disabled=!1,this.autofocus=!1,this.clearInput=!1,this.value="",this.validateOn="submit",this.showInlineError=!0,this.dateOrder="dmy",this.required=!1,this.hideLabel=!1,this.picker=!0,this.pickerOpen=!1,this.closeAfterPicked=!0,this.onInputChange=t=>{t.stopPropagation(),this.setValue(t.target.value)},this.onInputValidate=t=>{t.stopPropagation(),this._invalid=!t.detail.isValid,this.nanoValidate.emit({isValid:t.detail.isValid,errorMessage:t.detail.errorMessage,originalEvent:t.detail.originalEvent})},this.onInputKey=()=>{this.directInput=!0},this.onDatePicked=t=>{this.directInput=!1,this.value=t.detail.value,this.closeAfterPicked&&(this.pickerOpen=!1)},this.onDropdownHide=()=>{setTimeout((()=>this.pickerOpen=!1),200),setTimeout((()=>this.trigger.focus()),20)},this.onDropdownShow=()=>{setTimeout((()=>{this.pickerEle.setFocus(!1,"key"===this.pickerOpenSource),this.pickerOpenSource=null}),200)},this.onTriggerClick=()=>{this.pickerOpen||(this.pickerOpen=!0,this.pickerOpenSource="mouse")},this.onTriggerKey=t=>{[" ","Enter"].includes(t.key)&&(this.pickerOpen||(this.pickerOpen=!0,this.pickerOpenSource="key"))},this.onCloseClick=()=>{this.pickerOpen&&(this.pickerOpen=!1)},this.onCloseKeyDown=t=>{"Tab"===t.key&&t.shiftKey&&(this.pickerEle.setFocus(!0),t.preventDefault())}}get invalid(){return this._invalid}handleValueChange(){this.directInput||(this.inputValue=this.formatIsoDate(this.value)),this.nanoChange.emit({value:this.value,date:a(this.value)}),this.directInput=!1}handleDateOrderChange(){this.setDatePattern()}testDateValidity(){const t=a(this.value);let i,e,s="";this.value&&t&&(this.min&&(i=a(this.min))&&t<i?s="Date below the minimum: "+i.toLocaleDateString(this.locale,this.helperTextFormat):this.max&&(e=a(this.max))&&t>e&&(s="Date above the maximum: "+e.toLocaleDateString(this.locale,this.helperTextFormat))),setTimeout((async()=>{if(!this.input)return;const i=await this.input.getInputElement();this.value.length&&!t&&(s="Please enter a valid date"),i.setCustomValidity(s),"dirty"===this.input.validateOn&&this.input.showError(s)}),100)}handlePickerOpenChange(){this.dropdown.open=this.pickerOpen}async reportValidity(t){return await this.input.reportValidity(t)}async setFocus(){this.input&&this.input.setFocus()}async getInputElement(){return await this.input.getInputElement()}async showError(t){this.input&&this.input.showError(t)}setDatePattern(){let t=[],i=[];Array.from(this.dateOrder).map(((e,s)=>{t.push(r[e]),this.dateOrderIndeces[e]=s,i.push("y"===e?"yyyy":e+e)})),this.pattern=t.join("\\W+"),this.placeholder||"false"===this.placeholder||(this.placeholder=i.join(" "))}formatIsoDate(t){let i=[];Array.from("ymd").map((t=>i.push(r[t])));const e=t.match(new RegExp(i.join("\\W+")));if(!e)return"";let s=[];return s[this.dateOrderIndeces.d]=e[3],s[this.dateOrderIndeces.m]=e[2],s[this.dateOrderIndeces.y]=e[1],s.join(" ")}setValue(t){const i=t.match(new RegExp(this.pattern));if(!i)return void(this.value=t);let e=h(i[this.dateOrderIndeces.y+1],i[this.dateOrderIndeces.m+1],i[this.dateOrderIndeces.d+1]);if(!e&&(e=new Date(t),!e))return void(this.value=t);const s=o(e);return this.value=s,s}connectedCallback(){this.setDatePattern(),this.handleValueChange()}componentDidLoad(){this.pickerCloseBtn&&this.picker&&(this.pickerEle.firstFocusEle=this.pickerCloseBtn,this.dropdown.tetherTo=this.trigger,setTimeout((()=>this.handlePickerOpenChange()),300))}render(){this.locale=navigator.languages||navigator.language||void 0;let t="rtl"===this.host.ownerDocument.dir?"bottom-start":"bottom-end";const i=a(this.value),n=!!this.host.querySelector('[slot="helper"]');return e(s,{class:Object.assign({},d(this.color))},e("div",{class:"date-field"},e("nano-input",{class:"date-field__input",slot:"trigger",required:this.required||void 0,showInlineError:this.showInlineError,validateOn:this.validateOn,placeholder:"false"!==this.placeholder?this.placeholder:void 0,pattern:this.pattern,label:this.label,disabled:this.disabled||void 0,color:this.color||void 0,autofocus:this.autofocus||void 0,clearInput:this.clearInput||void 0,onNanoChange:this.onInputChange,onNanoInput:this.onInputKey,onNanoValidate:this.onInputValidate,name:"",form:this.form||void 0,size:this.size||void 0,readonly:this.readonly,value:this.inputValue,ref:t=>this.input=t,floatLabel:this.floatLabel,hideLabel:this.hideLabel,inputmode:"numeric"},e("slot",{name:"label"}),this.picker&&[e("button",{slot:"inline-button",class:"date-field__open",type:"button",onKeyDown:this.onTriggerKey,onClick:this.onTriggerClick,ref:t=>this.trigger=t,disabled:this.disabled||this.readonly},e("nano-icon",{name:"light/calendar-alt"})),e("nano-dropdown",{slot:"inline-button",placement:t,onNanoHide:this.onDropdownHide,onNanoShow:this.onDropdownShow,dialogTitle:"Choose a date",class:"date-field__dropdown",ref:t=>this.dropdown=t},e("div",null,e("div",{class:"date-field__close-bar"},e("button",{class:"date-field__close",type:"button",onMouseDown:this.onCloseClick,onKeyDown:this.onCloseKeyDown,ref:t=>this.pickerCloseBtn=t},e("nano-icon",{name:"light/times"}),e("span",{class:"vhidden"},"Close window"))),e("nano-date-picker",{onNanoDatePicked:this.onDatePicked,min:this.min||void 0,max:this.max||void 0,"is-modal":!0,ref:t=>this.pickerEle=t,localization:this.localization,selectedDate:this.value||this.initialPickerDate,firstDayOfWeek:this.firstDayOfWeek,color:this.color||void 0})))],(n||this.helperText||this.showInlineError)&&e("span",{slot:"helper"},e("span",{class:{vhidden:!!this.value.length}},e("slot",{name:"helper"})),this.helperText&&!!i&&e("span",null,i.toLocaleDateString(this.locale,this.helperTextFormat)))),e("input",{type:"hidden",value:this.value,name:this.name})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange","testDateValidity"],dateOrder:["handleDateOrderChange"],min:["testDateValidity"],max:["testDateValidity"],pickerOpen:["handlePickerOpenChange"]}}};c.style='.sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}@media (max-width: 35.9375em){.date-field.sc-nano-date-input::before{content:"";position:fixed;background:rgba(0, 0, 0, 0);left:0;right:0;top:0;bottom:0;z-index:-1;-webkit-transition:z-index 0.001s ease 1s, background 0.2s ease;transition:z-index 0.001s ease 1s, background 0.2s ease}[picker-open].sc-nano-date-input-h .date-field.sc-nano-date-input::before{-webkit-transition:z-index 0.001s ease, background 0.2s ease 0.001s;transition:z-index 0.001s ease, background 0.2s ease 0.001s;background:rgba(0, 0, 0, 0.5);z-index:100}}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}';export{c as nano_date_input}
+//# sourceMappingURL=p-c72b22be.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","src/components/date-input/date-input.tsx"],"names":["DateRegxps","d","m","y","inputIds","DateInput","[object Object]","hostRef","this","directInput","dateOrderIndeces","inputId","locale","window","navigator","languages","language","undefined","_invalid","helperText","helperTextFormat","year","month","day","floatLabel","name","readonly","disabled","autofocus","clearInput","value","validateOn","showInlineError","dateOrder","required","hideLabel","picker","pickerOpen","closeAfterPicked","onInputChange","e","stopPropagation","setValue","target","onInputValidate","detail","isValid","nanoValidate","emit","errorMessage","originalEvent","onInputKey","onDatePicked","onDropdownHide","setTimeout","trigger","focus","onDropdownShow","pickerEle","setFocus","pickerOpenSource","onTriggerClick","onTriggerKey","includes","key","onCloseClick","onCloseKeyDown","shiftKey","preventDefault","invalid","inputValue","formatIsoDate","nanoChange","date","parseISODate","setDatePattern","valueDate","min","max","error","toLocaleDateString","async","input","getInputElement","length","setCustomValidity","showError","dropdown","open","validateFirst","reportValidity","message","dateRegexOrdered","dateStrOrd","Array","from","map","datepart","i","push","pattern","join","placeholder","isoDate","matches","match","RegExp","formatted","createDate","Date","dateStr","printISODate","handleValueChange","pickerCloseBtn","firstFocusEle","tetherTo","handlePickerOpenChange","placement","host","ownerDocument","dir","hasHelperSlot","querySelector","h","Host","class","Object","assign","createColorClasses","color","slot","label","onNanoChange","onNanoInput","onNanoValidate","form","size","ref","inputmode","type","onKeyDown","onClick","onNanoHide","onNanoShow","dialogTitle","onMouseDown","pickerClose","onNanoDatePicked","is-modal","localization","selectedDate","initialPickerDate","firstDayOfWeek","vhidden"],"mappings":"sJAAA,MC+BMA,EAAa,CACjBC,EAAG,aACHC,EAAG,aACHC,EAAG,YAGL,IAAIC,EAAW,EAaFC,EAAS,MALtBC,YAAAC,+FAaUC,KAAAC,aAAc,EACdD,KAAAE,iBAAmB,CAAET,EAAG,EAAGC,EAAG,EAAGC,EAAG,GACpCK,KAAAG,QAAU,cAAcP,IACxBI,KAAAI,OACLC,OAAOC,UAAUC,WAClBF,OAAOC,UAAUE,eACjBC,EAmBOT,KAAAU,UAAW,EAKZV,KAAAW,YAAsB,EAKtBX,KAAAY,iBAAkC,CACxCC,KAAM,UACNC,MAAO,OACPC,IAAK,WAMCf,KAAAgB,YAAsB,EAKtBhB,KAAAiB,KAAejB,KAAKG,QAKpBH,KAAAkB,UAAW,EA2BXlB,KAAAmB,UAAW,EAUXnB,KAAAoB,WAAY,EAKZpB,KAAAqB,YAAa,EAgBmBrB,KAAAsB,MAAgB,GAYhDtB,KAAAuB,WAAsD,SAKrCvB,KAAAwB,iBAAkB,EAMnCxB,KAAAyB,UAA2C,MAU3CzB,KAAA0B,UAAW,EAiBX1B,KAAA2B,WAAsB,EA4CtB3B,KAAA4B,QAAkB,EAWc5B,KAAA6B,YAAsB,EAUtD7B,KAAA8B,kBAA4B,EAsD5B9B,KAAA+B,cACNC,IAIAA,EAAEC,kBACFjC,KAAKkC,SAASF,EAAEG,OAAOb,QAGjBtB,KAAAoC,gBAAmBJ,IACzBA,EAAEC,kBACFjC,KAAKU,UAAYsB,EAAEK,OAAOC,QAC1BtC,KAAKuC,aAAaC,KAAK,CACrBF,QAASN,EAAEK,OAAOC,QAClBG,aAAcT,EAAEK,OAAOI,aACvBC,cAAeV,EAAEK,OAAOK,iBAIpB1C,KAAA2C,WAAa,KACnB3C,KAAKC,aAAc,GAGbD,KAAA4C,aAAgBZ,IACtBhC,KAAKC,aAAc,EACnBD,KAAKsB,MAAQU,EAAEK,OAAOf,MAClBtB,KAAK8B,mBAAkB9B,KAAK6B,YAAa,IAGvC7B,KAAA6C,eAAiB,KACvBC,YAAW,IAAQ9C,KAAK6B,YAAa,GAAQ,KAC7CiB,YAAW,IAAO9C,KAAK+C,QAAQC,SAAS,KAGlChD,KAAAiD,eAAiB,KACvBH,YAAW,KACT9C,KAAKkD,UAAUC,UAAS,EAAiC,QAA1BnD,KAAKoD,kBACpCpD,KAAKoD,iBAAmB,OACvB,MAGGpD,KAAAqD,eAAiB,KAClBrD,KAAK6B,aACR7B,KAAK6B,YAAa,EAClB7B,KAAKoD,iBAAmB,UAIpBpD,KAAAsD,aAAgBtB,IAClB,CAAC,IAAK,SAASuB,SAASvB,EAAEwB,OACvBxD,KAAK6B,aACR7B,KAAK6B,YAAa,EAClB7B,KAAKoD,iBAAmB,SAKtBpD,KAAAyD,aAAe,KACjBzD,KAAK6B,aAAY7B,KAAK6B,YAAa,IAGjC7B,KAAA0D,eAAkB1B,IAEV,QAAVA,EAAEwB,KAAiBxB,EAAE2B,WACvB3D,KAAKkD,UAAUC,UAAS,GACxBnB,EAAE4B,mBArUNC,cAEE,OAAO7D,KAAKU,SA4FdZ,oBACOE,KAAKC,cAAaD,KAAK8D,WAAa9D,KAAK+D,cAAc/D,KAAKsB,QACjEtB,KAAKgE,WAAWxB,KAAK,CAAElB,MAAOtB,KAAKsB,MAAO2C,KAAMC,EAAalE,KAAKsB,SAClEtB,KAAKC,aAAc,EAoBrBH,wBACEE,KAAKmE,iBA4BPrE,mBACE,MAAMsE,EAAYF,EAAalE,KAAKsB,OACpC,IAAI+C,EACFC,EACAC,EAAgB,GAEdvE,KAAKsB,OAAS8C,IACZpE,KAAKqE,MAAQA,EAAMH,EAAalE,KAAKqE,OAASD,EAAYC,EAC5DE,EACE,2BACAF,EAAIG,mBAAmBxE,KAAKI,OAAQJ,KAAKY,kBAE3CZ,KAAKsE,MACJA,EAAMJ,EAAalE,KAAKsE,OACzBF,EAAYE,IAEZC,EACE,2BACAD,EAAIE,mBAAmBxE,KAAKI,OAAQJ,KAAKY,oBAI/CkC,YAAW2B,UACT,IAAKzE,KAAK0E,MAAO,OACjB,MAAMA,QAAc1E,KAAK0E,MAAMC,kBAC3B3E,KAAKsB,MAAMsD,SAAWR,IAAWG,EAAQ,6BAE7CG,EAAMG,kBAAkBN,GACM,UAA1BvE,KAAK0E,MAAMnD,YACbvB,KAAK0E,MAAMI,UAAUP,KAEtB,KAsBLzE,yBACEE,KAAK+E,SAASC,KAAOhF,KAAK6B,WA6B5B/B,qBAAqBmF,GACnB,aAAajF,KAAK0E,MAAMQ,eAAeD,GAOzCnF,iBACME,KAAK0E,OAAO1E,KAAK0E,MAAMvB,WAO7BrD,wBACE,aAAaE,KAAK0E,MAAMC,kBAO1B7E,gBAAgBqF,GACTnF,KAAK0E,OACV1E,KAAK0E,MAAMI,UAAUK,GA6EfrF,iBACN,IAAIsF,EAAmB,GACnBC,EAAa,GACjBC,MAAMC,KAAKvF,KAAKyB,WAAW+D,KAAI,CAACC,EAAUC,KACxCN,EAAiBO,KAAKnG,EAAWiG,IACjCzF,KAAKE,iBAAiBuF,GAAYC,EAClCL,EAAWM,KAAkB,MAAbF,EAAmB,OAASA,EAAWA,MAEzDzF,KAAK4F,QAAUR,EAAiBS,KAAK,QAEhC7F,KAAK8F,aAAoC,UAArB9F,KAAK8F,cAC5B9F,KAAK8F,YAAcT,EAAWQ,KAAK,MAI/B/F,cAAciG,GACpB,IAAIX,EAAmB,GACvBE,MAAMC,KAAK,OAAOC,KAAKC,GACrBL,EAAiBO,KAAKnG,EAAWiG,MAEnC,MAAMO,EAAUD,EAAQE,MAAM,IAAIC,OAAOd,EAAiBS,KAAK,UAC/D,IAAKG,EAAS,MAAO,GAErB,IAAIG,EAAY,GAKhB,OAJAA,EAAUnG,KAAKE,iBAAiBT,GAAKuG,EAAQ,GAC7CG,EAAUnG,KAAKE,iBAAiBR,GAAKsG,EAAQ,GAC7CG,EAAUnG,KAAKE,iBAAiBP,GAAKqG,EAAQ,GAEtCG,EAAUN,KAAK,KAIhB/F,SAASgE,GACf,MAAMkC,EAAUlC,EAAWmC,MAAM,IAAIC,OAAOlG,KAAK4F,UAGjD,IAAKI,EAEH,YADAhG,KAAKsB,MAAQwC,GAIf,IAAIG,EAAOmC,EACTJ,EAAQhG,KAAKE,iBAAiBP,EAAI,GAClCqG,EAAQhG,KAAKE,iBAAiBR,EAAI,GAClCsG,EAAQhG,KAAKE,iBAAiBT,EAAI,IAGpC,IAAKwE,IAEHA,EAAO,IAAIoC,KAAKvC,IAGXG,GAEH,YADAjE,KAAKsB,MAAQwC,GAKjB,MAAMwC,EAAUC,EAAatC,GAE7B,OADAjE,KAAKsB,MAAQgF,EACNA,EAGTxG,oBACEE,KAAKmE,iBACLnE,KAAKwG,oBAGP1G,mBACOE,KAAKyG,gBAAmBzG,KAAK4B,SAClC5B,KAAKkD,UAAUwD,cAAgB1G,KAAKyG,eACpCzG,KAAK+E,SAAS4B,SAAW3G,KAAK+C,QAC9BD,YAAW,IAAO9C,KAAK4G,0BAA0B,MAGnD9G,SACEE,KAAKI,OACFE,UAAUC,WAA0BD,UAAUE,eAAYC,EAC7D,IAAIoG,EAC4C,QAA7C7G,KAAK8G,KAAKC,cAA2BC,IAClC,eACA,aACN,MAAM5C,EAAYF,EAAalE,KAAKsB,OAC9B2F,IAAkBjH,KAAK8G,KAAKI,cAAc,mBAEhD,OACEC,EAACC,EAAI,CAACC,MAAKC,OAAAC,OAAA,GAAOC,EAAmBxH,KAAKyH,SACxCN,EAAA,MAAA,CAAKE,MAAM,cACTF,EAAA,aAAA,CACEE,MAAM,oBACNK,KAAK,UACLhG,SAAU1B,KAAK0B,eAAYjB,EAC3Be,gBAAiBxB,KAAKwB,gBACtBD,WAAYvB,KAAKuB,WACjBuE,YACuB,UAArB9F,KAAK8F,YAA0B9F,KAAK8F,iBAAcrF,EAEpDmF,QAAS5F,KAAK4F,QACd+B,MAAO3H,KAAK2H,MACZxG,SAAUnB,KAAKmB,eAAYV,EAC3BgH,MAAOzH,KAAKyH,YAAShH,EACrBW,UAAWpB,KAAKoB,gBAAaX,EAC7BY,WAAYrB,KAAKqB,iBAAcZ,EAC/BmH,aAAc5H,KAAK+B,cACnB8F,YAAa7H,KAAK2C,WAClBmF,eAAgB9H,KAAKoC,gBACrBnB,KAAK,GACL8G,KAAM/H,KAAK+H,WAAQtH,EACnBuH,KAAMhI,KAAKgI,WAAQvH,EACnBS,SAAUlB,KAAKkB,SACfI,MAAOtB,KAAK8D,WACZmE,IAAMvD,GAAW1E,KAAK0E,MAAQA,EAC9B1D,WAAYhB,KAAKgB,WACjBW,UAAW3B,KAAK2B,UAChBuG,UAAW,WAEXf,EAAA,OAAA,CAAMlG,KAAK,UACVjB,KAAK4B,QAAU,CACduF,EAAA,SAAA,CACEO,KAAK,gBACLL,MAAM,mBACNc,KAAK,SACLC,UAAWpI,KAAKsD,aAChB+E,QAASrI,KAAKqD,eACd4E,IAAMlF,GAAa/C,KAAK+C,QAAUA,EAClC5B,SAAUnB,KAAKmB,UAAYnB,KAAKkB,UAEhCiG,EAAA,YAAA,CAAWlG,KAAK,wBAGlBkG,EAAA,gBAAA,CACEO,KAAK,gBACLb,UAAWA,EACXyB,WAAYtI,KAAK6C,eACjB0F,WAAYvI,KAAKiD,eACjBuF,YAAY,gBACZnB,MAAM,uBACNY,IAAMlD,GAAc/E,KAAK+E,SAAWA,GAEpCoC,EAAA,MAAA,KACEA,EAAA,MAAA,CAAKE,MAAM,yBACTF,EAAA,SAAA,CACEE,MAAM,oBACNc,KAAK,SACLM,YAAazI,KAAKyD,aAClB2E,UAAWpI,KAAK0D,eAChBuE,IAAMS,GAAiB1I,KAAKyG,eAAiBiC,GAE7CvB,EAAA,YAAA,CAAWlG,KAAK,gBAChBkG,EAAA,OAAA,CAAME,MAAM,WAAS,kBAGzBF,EAAA,mBAAA,CACEwB,iBAAkB3I,KAAK4C,aACvByB,IAAKrE,KAAKqE,UAAO5D,EACjB6D,IAAKtE,KAAKsE,UAAO7D,EAASmI,YAChB,EACVX,IAAMrG,GAAY5B,KAAKkD,UAAYtB,EACnCiH,aAAc7I,KAAK6I,aACnBC,aAAc9I,KAAKsB,OAAStB,KAAK+I,kBACjCC,eAAgBhJ,KAAKgJ,eACrBvB,MAAOzH,KAAKyH,YAAShH,QAK3BwG,GAAiBjH,KAAKW,YAAcX,KAAKwB,kBACzC2F,EAAA,OAAA,CAAMO,KAAK,UACTP,EAAA,OAAA,CAAME,MAAO,CAAE4B,UAAWjJ,KAAKsB,MAAMsD,SACnCuC,EAAA,OAAA,CAAMlG,KAAK,YAEZjB,KAAKW,cAAgByD,GACpB+C,EAAA,OAAA,KACG/C,EAAUI,mBACTxE,KAAKI,OACLJ,KAAKY,qBAOjBuG,EAAA,QAAA,CAAOgB,KAAK,SAAS7G,MAAOtB,KAAKsB,MAAOL,KAAMjB,KAAKiB,sPDjlBxC","sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{$color-celsius};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      } else if (\n        this.max &&\n        (max = parseISODate(this.max)) &&\n        valueDate > max\n      ) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n    }\n\n    setTimeout(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    }, 100);\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (\n    e: CustomEvent & {\n      target: HTMLInputElement;\n    }\n  ) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 20);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n          >\n            <slot name=\"label\" />\n            {this.picker && [\n              <button\n                slot=\"inline-button\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"inline-button\"\n                placement={placement}\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/times\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal={true}\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+var t="top",n="bottom",e="right",r="left",i=[t,n,e,r],o=i.reduce((function(t,n){return t.concat([n+"-start",n+"-end"])}),[]),a=[].concat(i,["auto"]).reduce((function(t,n){return t.concat([n,n+"-start",n+"-end"])}),[]),u=["beforeRead","read","afterRead","beforeMain","main","afterMain","beforeWrite","write","afterWrite"];function f(t){return t?(t.nodeName||"").toLowerCase():null}function c(t){if(null==t)return window;if("[object Window]"!==t.toString()){var n=t.ownerDocument;return n&&n.defaultView||window}return t}function s(t){return t instanceof c(t).Element||t instanceof Element}function p(t){return t instanceof c(t).HTMLElement||t instanceof HTMLElement}function d(t){return"undefined"!=typeof ShadowRoot&&(t instanceof c(t).ShadowRoot||t instanceof ShadowRoot)}function l(t){return t.split("-")[0]}function v(t){var n=t.getBoundingClientRect();return{width:n.width/1,height:n.height/1,top:n.top/1,right:n.right/1,bottom:n.bottom/1,left:n.left/1,x:n.left/1,y:n.top/1}}function h(t){var n=v(t),e=t.offsetWidth,r=t.offsetHeight;return Math.abs(n.width-e)<=1&&(e=n.width),Math.abs(n.height-r)<=1&&(r=n.height),{x:t.offsetLeft,y:t.offsetTop,width:e,height:r}}function b(t,n){var e=n.getRootNode&&n.getRootNode();if(t.contains(n))return!0;if(e&&d(e)){var r=n;do{if(r&&t.isSameNode(r))return!0;r=r.parentNode||r.host}while(r)}return!1}function m(t){return c(t).getComputedStyle(t)}function y(t){return["table","td","th"].indexOf(f(t))>=0}function w(t){return((s(t)?t.ownerDocument:t.document)||window.document).documentElement}function g(t){return"html"===f(t)?t:t.assignedSlot||t.parentNode||(d(t)?t.host:null)||w(t)}function O(t){return p(t)&&"fixed"!==m(t).position?t.offsetParent:null}function x(t){for(var n=c(t),e=O(t);e&&y(e)&&"static"===m(e).position;)e=O(e);return e&&("html"===f(e)||"body"===f(e)&&"static"===m(e).position)?n:e||function(t){var n=-1!==navigator.userAgent.toLowerCase().indexOf("firefox");if(-1!==navigator.userAgent.indexOf("Trident")&&p(t)&&"fixed"===m(t).position)return null;for(var e=g(t);p(e)&&["html","body"].indexOf(f(e))<0;){var r=m(e);if("none"!==r.transform||"none"!==r.perspective||"paint"===r.contain||-1!==["transform","perspective"].indexOf(r.willChange)||n&&"filter"===r.willChange||n&&r.filter&&"none"!==r.filter)return e;e=e.parentNode}return null}(t)||n}function j(t){return["top","bottom"].indexOf(t)>=0?"x":"y"}var M=Math.max,E=Math.min,k=Math.round;function q(t,n,e){return M(t,E(n,e))}function A(t){return Object.assign({},{top:0,right:0,bottom:0,left:0},t)}function P(t,n){return n.reduce((function(n,e){return n[e]=t,n}),{})}function B(t){return t.split("-")[1]}var S={top:"auto",right:"auto",bottom:"auto",left:"auto"};function T(i){var o,a=i.popper,u=i.popperRect,f=i.placement,s=i.variation,p=i.offsets,d=i.position,l=i.gpuAcceleration,v=i.adaptive,h=i.roundOffsets,b=!0===h?function(t){var n=t.y,e=window.devicePixelRatio||1;return{x:k(k(t.x*e)/e)||0,y:k(k(n*e)/e)||0}}(p):"function"==typeof h?h(p):p,y=b.x,g=void 0===y?0:y,O=b.y,j=void 0===O?0:O,M=p.hasOwnProperty("x"),E=p.hasOwnProperty("y"),q=r,A=t,P=window;if(v){var B=x(a),T="clientHeight",R="clientWidth";B===c(a)&&"static"!==m(B=w(a)).position&&"absolute"===d&&(T="scrollHeight",R="scrollWidth"),B=B,f!==t&&(f!==r&&f!==e||"end"!==s)||(A=n,j-=B[T]-u.height,j*=l?1:-1),f!==r&&(f!==t&&f!==n||"end"!==s)||(q=e,g-=B[R]-u.width,g*=l?1:-1)}var W,H=Object.assign({position:d},v&&S);return Object.assign({},H,l?((W={})[A]=E?"0":"",W[q]=M?"0":"",W.transform=(P.devicePixelRatio||1)<=1?"translate("+g+"px, "+j+"px)":"translate3d("+g+"px, "+j+"px, 0)",W):((o={})[A]=E?j+"px":"",o[q]=M?g+"px":"",o.transform="",o))}var R={passive:!0},W={left:"right",right:"left",bottom:"top",top:"bottom"};function H(t){return t.replace(/left|right|bottom|top/g,(function(t){return W[t]}))}var L={start:"end",end:"start"};function I(t){return t.replace(/start|end/g,(function(t){return L[t]}))}function C(t){var n=c(t);return{scrollLeft:n.pageXOffset,scrollTop:n.pageYOffset}}function F(t){return v(w(t)).left+C(t).scrollLeft}function z(t){var n=m(t);return/auto|scroll|overlay|hidden/.test(n.overflow+n.overflowY+n.overflowX)}function D(t){return["html","body","#document"].indexOf(f(t))>=0?t.ownerDocument.body:p(t)&&z(t)?t:D(g(t))}function U(t,n){var e;void 0===n&&(n=[]);var r=D(t),i=r===(null==(e=t.ownerDocument)?void 0:e.body),o=c(r),a=i?[o].concat(o.visualViewport||[],z(r)?r:[]):r,u=n.concat(a);return i?u:u.concat(U(g(a)))}function V(t){return Object.assign({},t,{left:t.x,top:t.y,right:t.x+t.width,bottom:t.y+t.height})}function _(t,n){return"viewport"===n?V(function(t){var n=c(t),e=w(t),r=n.visualViewport,i=e.clientWidth,o=e.clientHeight,a=0,u=0;return r&&(i=r.width,o=r.height,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||(a=r.offsetLeft,u=r.offsetTop)),{width:i,height:o,x:a+F(t),y:u}}(t)):p(n)?function(t){var n=v(t);return n.top=n.top+t.clientTop,n.left=n.left+t.clientLeft,n.bottom=n.top+t.clientHeight,n.right=n.left+t.clientWidth,n.width=t.clientWidth,n.height=t.clientHeight,n.x=n.left,n.y=n.top,n}(n):V(function(t){var n,e=w(t),r=C(t),i=null==(n=t.ownerDocument)?void 0:n.body,o=M(e.scrollWidth,e.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),a=M(e.scrollHeight,e.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),u=-r.scrollLeft+F(t),f=-r.scrollTop;return"rtl"===m(i||e).direction&&(u+=M(e.clientWidth,i?i.clientWidth:0)-o),{width:o,height:a,x:u,y:f}}(w(t)))}function G(i){var o,a=i.reference,u=i.element,f=i.placement,c=f?l(f):null,s=f?B(f):null,p=a.x+a.width/2-u.width/2,d=a.y+a.height/2-u.height/2;switch(c){case t:o={x:p,y:a.y-u.height};break;case n:o={x:p,y:a.y+a.height};break;case e:o={x:a.x+a.width,y:d};break;case r:o={x:a.x-u.width,y:d};break;default:o={x:a.x,y:a.y}}var v=c?j(c):null;if(null!=v){var h="y"===v?"height":"width";switch(s){case"start":o[v]=o[v]-(a[h]/2-u[h]/2);break;case"end":o[v]=o[v]+(a[h]/2-u[h]/2)}}return o}function J(r,o){void 0===o&&(o={});var a=o.placement,u=void 0===a?r.placement:a,c=o.boundary,d=void 0===c?"clippingParents":c,l=o.rootBoundary,h=void 0===l?"viewport":l,y=o.elementContext,O=void 0===y?"popper":y,j=o.altBoundary,k=void 0!==j&&j,q=o.padding,B=void 0===q?0:q,S=A("number"!=typeof B?B:P(B,i)),T=r.rects.popper,R=r.elements[k?"popper"===O?"reference":"popper":O],W=function(t,n,e){var r="clippingParents"===n?function(t){var n=U(g(t)),e=["absolute","fixed"].indexOf(m(t).position)>=0&&p(t)?x(t):t;return s(e)?n.filter((function(t){return s(t)&&b(t,e)&&"body"!==f(t)})):[]}(t):[].concat(n),i=[].concat(r,[e]),o=i.reduce((function(n,e){var r=_(t,e);return n.top=M(r.top,n.top),n.right=E(r.right,n.right),n.bottom=E(r.bottom,n.bottom),n.left=M(r.left,n.left),n}),_(t,i[0]));return o.width=o.right-o.left,o.height=o.bottom-o.top,o.x=o.left,o.y=o.top,o}(s(R)?R:R.contextElement||w(r.elements.popper),d,h),H=v(r.elements.reference),L=G({reference:H,element:T,strategy:"absolute",placement:u}),I=V(Object.assign({},T,L)),C="popper"===O?I:H,F={top:W.top-C.top+S.top,bottom:C.bottom-W.bottom+S.bottom,left:W.left-C.left+S.left,right:C.right-W.right+S.right},z=r.modifiersData.offset;if("popper"===O&&z){var D=z[u];Object.keys(F).forEach((function(r){var i=[e,n].indexOf(r)>=0?1:-1,o=[t,n].indexOf(r)>=0?"y":"x";F[r]+=D[o]*i}))}return F}function K(t,n){void 0===n&&(n={});var e=n.boundary,r=n.rootBoundary,u=n.padding,f=n.flipVariations,c=n.allowedAutoPlacements,s=void 0===c?a:c,p=B(n.placement),d=p?f?o:o.filter((function(t){return B(t)===p})):i,v=d.filter((function(t){return s.indexOf(t)>=0}));0===v.length&&(v=d);var h=v.reduce((function(n,i){return n[i]=J(t,{placement:i,boundary:e,rootBoundary:r,padding:u})[l(i)],n}),{});return Object.keys(h).sort((function(t,n){return h[t]-h[n]}))}function N(t,n,e){return void 0===e&&(e={x:0,y:0}),{top:t.top-n.height-e.y,right:t.right-n.width+e.x,bottom:t.bottom-n.height+e.y,left:t.left-n.width-e.x}}function Q(i){return[t,e,n,r].some((function(t){return i[t]>=0}))}function X(t,n,e){void 0===e&&(e=!1);var r=p(n);p(n)&&function(t){t.getBoundingClientRect()}(n);var i,o,a=w(n),u=v(t),s={scrollLeft:0,scrollTop:0},d={x:0,y:0};return(r||!r&&!e)&&(("body"!==f(n)||z(a))&&(s=(i=n)!==c(i)&&p(i)?{scrollLeft:(o=i).scrollLeft,scrollTop:o.scrollTop}:C(i)),p(n)?((d=v(n)).x+=n.clientLeft,d.y+=n.clientTop):a&&(d.x=F(a))),{x:u.left+s.scrollLeft-d.x,y:u.top+s.scrollTop-d.y,width:u.width,height:u.height}}function Y(t){var n=new Map,e=new Set,r=[];function i(t){e.add(t.name),[].concat(t.requires||[],t.requiresIfExists||[]).forEach((function(t){if(!e.has(t)){var r=n.get(t);r&&i(r)}})),r.push(t)}return t.forEach((function(t){n.set(t.name,t)})),t.forEach((function(t){e.has(t.name)||i(t)})),r}var Z={placement:"bottom",modifiers:[],strategy:"absolute"};function $(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return!n.some((function(t){return!(t&&"function"==typeof t.getBoundingClientRect)}))}function tt(t){void 0===t&&(t={});var n=t.defaultModifiers,e=void 0===n?[]:n,r=t.defaultOptions,i=void 0===r?Z:r;return function(t,n,r){void 0===r&&(r=i);var o,a,f={placement:"bottom",orderedModifiers:[],options:Object.assign({},Z,i),modifiersData:{},elements:{reference:t,popper:n},attributes:{},styles:{}},c=[],p=!1,d={state:f,setOptions:function(r){var o="function"==typeof r?r(f.options):r;l(),f.options=Object.assign({},i,f.options,o),f.scrollParents={reference:s(t)?U(t):t.contextElement?U(t.contextElement):[],popper:U(n)};var a,p,v=function(t){var n=Y(t);return u.reduce((function(t,e){return t.concat(n.filter((function(t){return t.phase===e})))}),[])}((a=[].concat(e,f.options.modifiers),p=a.reduce((function(t,n){var e=t[n.name];return t[n.name]=e?Object.assign({},e,n,{options:Object.assign({},e.options,n.options),data:Object.assign({},e.data,n.data)}):n,t}),{}),Object.keys(p).map((function(t){return p[t]}))));return f.orderedModifiers=v.filter((function(t){return t.enabled})),f.orderedModifiers.forEach((function(t){var n=t.options,e=t.effect;if("function"==typeof e){var r=e({state:f,name:t.name,instance:d,options:void 0===n?{}:n});c.push(r||function(){})}})),d.update()},forceUpdate:function(){if(!p){var t=f.elements,n=t.reference,e=t.popper;if($(n,e)){f.rects={reference:X(n,x(e),"fixed"===f.options.strategy),popper:h(e)},f.reset=!1,f.placement=f.options.placement,f.orderedModifiers.forEach((function(t){return f.modifiersData[t.name]=Object.assign({},t.data)}));for(var r=0;r<f.orderedModifiers.length;r++)if(!0!==f.reset){var i=f.orderedModifiers[r],o=i.fn,a=i.options;"function"==typeof o&&(f=o({state:f,options:void 0===a?{}:a,name:i.name,instance:d})||f)}else f.reset=!1,r=-1}}},update:(o=function(){return new Promise((function(t){d.forceUpdate(),t(f)}))},function(){return a||(a=new Promise((function(t){Promise.resolve().then((function(){a=void 0,t(o())}))}))),a}),destroy:function(){l(),p=!0}};if(!$(t,n))return d;function l(){c.forEach((function(t){return t()})),c=[]}return d.setOptions(r).then((function(t){!p&&r.onFirstUpdate&&r.onFirstUpdate(t)})),d}}var nt=tt({defaultModifiers:[{name:"eventListeners",enabled:!0,phase:"write",fn:function(){},effect:function(t){var n=t.state,e=t.instance,r=t.options,i=r.scroll,o=void 0===i||i,a=r.resize,u=void 0===a||a,f=c(n.elements.popper),s=[].concat(n.scrollParents.reference,n.scrollParents.popper);return o&&s.forEach((function(t){t.addEventListener("scroll",e.update,R)})),u&&f.addEventListener("resize",e.update,R),function(){o&&s.forEach((function(t){t.removeEventListener("scroll",e.update,R)})),u&&f.removeEventListener("resize",e.update,R)}},data:{}},{name:"popperOffsets",enabled:!0,phase:"read",fn:function(t){var n=t.state;n.modifiersData[t.name]=G({reference:n.rects.reference,element:n.rects.popper,strategy:"absolute",placement:n.placement})},data:{}},{name:"computeStyles",enabled:!0,phase:"beforeWrite",fn:function(t){var n=t.state,e=t.options,r=e.gpuAcceleration,i=void 0===r||r,o=e.adaptive,a=void 0===o||o,u=e.roundOffsets,f=void 0===u||u,c={placement:l(n.placement),variation:B(n.placement),popper:n.elements.popper,popperRect:n.rects.popper,gpuAcceleration:i};null!=n.modifiersData.popperOffsets&&(n.styles.popper=Object.assign({},n.styles.popper,T(Object.assign({},c,{offsets:n.modifiersData.popperOffsets,position:n.options.strategy,adaptive:a,roundOffsets:f})))),null!=n.modifiersData.arrow&&(n.styles.arrow=Object.assign({},n.styles.arrow,T(Object.assign({},c,{offsets:n.modifiersData.arrow,position:"absolute",adaptive:!1,roundOffsets:f})))),n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-placement":n.placement})},data:{}},{name:"applyStyles",enabled:!0,phase:"write",fn:function(t){var n=t.state;Object.keys(n.elements).forEach((function(t){var e=n.styles[t]||{},r=n.attributes[t]||{},i=n.elements[t];p(i)&&f(i)&&(Object.assign(i.style,e),Object.keys(r).forEach((function(t){var n=r[t];!1===n?i.removeAttribute(t):i.setAttribute(t,!0===n?"":n)})))}))},effect:function(t){var n=t.state,e={popper:{position:n.options.strategy,left:"0",top:"0",margin:"0"},arrow:{position:"absolute"},reference:{}};return Object.assign(n.elements.popper.style,e.popper),n.styles=e,n.elements.arrow&&Object.assign(n.elements.arrow.style,e.arrow),function(){Object.keys(n.elements).forEach((function(t){var r=n.elements[t],i=n.attributes[t]||{},o=Object.keys(n.styles.hasOwnProperty(t)?n.styles[t]:e[t]).reduce((function(t,n){return t[n]="",t}),{});p(r)&&f(r)&&(Object.assign(r.style,o),Object.keys(i).forEach((function(t){r.removeAttribute(t)})))}))}},requires:["computeStyles"]},{name:"offset",enabled:!0,phase:"main",requires:["popperOffsets"],fn:function(n){var i=n.state,o=n.name,u=n.options.offset,f=void 0===u?[0,0]:u,c=a.reduce((function(n,o){return n[o]=function(n,i,o){var a=l(n),u=[r,t].indexOf(a)>=0?-1:1,f="function"==typeof o?o(Object.assign({},i,{placement:n})):o,c=f[0],s=f[1];return c=c||0,s=(s||0)*u,[r,e].indexOf(a)>=0?{x:s,y:c}:{x:c,y:s}}(o,i.rects,f),n}),{}),s=c[i.placement],p=s.y;null!=i.modifiersData.popperOffsets&&(i.modifiersData.popperOffsets.x+=s.x,i.modifiersData.popperOffsets.y+=p),i.modifiersData[o]=c}},{name:"flip",enabled:!0,phase:"main",fn:function(i){var o=i.state,a=i.options,u=i.name;if(!o.modifiersData[u]._skip){for(var f=a.mainAxis,c=void 0===f||f,s=a.altAxis,p=void 0===s||s,d=a.fallbackPlacements,v=a.padding,h=a.boundary,b=a.rootBoundary,m=a.altBoundary,y=a.flipVariations,w=void 0===y||y,g=a.allowedAutoPlacements,O=o.options.placement,x=l(O),j=d||(x!==O&&w?function(t){if("auto"===l(t))return[];var n=H(t);return[I(t),n,I(n)]}(O):[H(O)]),M=[O].concat(j).reduce((function(t,n){return t.concat("auto"===l(n)?K(o,{placement:n,boundary:h,rootBoundary:b,padding:v,flipVariations:w,allowedAutoPlacements:g}):n)}),[]),E=o.rects.reference,k=o.rects.popper,q=new Map,A=!0,P=M[0],S=0;S<M.length;S++){var T=M[S],R=l(T),W="start"===B(T),L=[t,n].indexOf(R)>=0,C=L?"width":"height",F=J(o,{placement:T,boundary:h,rootBoundary:b,altBoundary:m,padding:v}),z=L?W?e:r:W?n:t;E[C]>k[C]&&(z=H(z));var D=H(z),U=[];if(c&&U.push(F[R]<=0),p&&U.push(F[z]<=0,F[D]<=0),U.every((function(t){return t}))){P=T,A=!1;break}q.set(T,U)}if(A)for(var V=function(t){var n=M.find((function(n){var e=q.get(n);if(e)return e.slice(0,t).every((function(t){return t}))}));if(n)return P=n,"break"},_=w?3:1;_>0&&"break"!==V(_);_--);o.placement!==P&&(o.modifiersData[u]._skip=!0,o.placement=P,o.reset=!0)}},requiresIfExists:["offset"],data:{_skip:!1}},{name:"preventOverflow",enabled:!0,phase:"main",fn:function(i){var o=i.state,a=i.options,u=i.name,f=a.mainAxis,c=void 0===f||f,s=a.altAxis,p=void 0!==s&&s,d=a.tether,v=void 0===d||d,b=a.tetherOffset,m=void 0===b?0:b,y=J(o,{boundary:a.boundary,rootBoundary:a.rootBoundary,padding:a.padding,altBoundary:a.altBoundary}),w=l(o.placement),g=B(o.placement),O=!g,k=j(w),A="x"===k?"y":"x",P=o.modifiersData.popperOffsets,S=o.rects.reference,T=o.rects.popper,R="function"==typeof m?m(Object.assign({},o.rects,{placement:o.placement})):m,W={x:0,y:0};if(P){if(c||p){var H="y"===k?t:r,L="y"===k?n:e,I="y"===k?"height":"width",C=P[k],F=P[k]+y[H],z=P[k]-y[L],D=v?-T[I]/2:0,U="start"===g?S[I]:T[I],V="start"===g?-T[I]:-S[I],_=o.elements.arrow,G=v&&_?h(_):{width:0,height:0},K=o.modifiersData["arrow#persistent"]?o.modifiersData["arrow#persistent"].padding:{top:0,right:0,bottom:0,left:0},N=K[H],Q=K[L],X=q(0,S[I],G[I]),Y=O?S[I]/2-D-X-N-R:U-X-N-R,Z=O?-S[I]/2+D+X+Q+R:V+X+Q+R,$=o.elements.arrow&&x(o.elements.arrow),tt=o.modifiersData.offset?o.modifiersData.offset[o.placement][k]:0,nt=P[k]+Y-tt-($?"y"===k?$.clientTop||0:$.clientLeft||0:0),et=P[k]+Z-tt;if(c){var rt=q(v?E(F,nt):F,C,v?M(z,et):z);P[k]=rt,W[k]=rt-C}if(p){var it=P[A],ot=it+y["x"===k?t:r],at=it-y["x"===k?n:e],ut=q(v?E(ot,nt):ot,it,v?M(at,et):at);P[A]=ut,W[A]=ut-it}}o.modifiersData[u]=W}},requiresIfExists:["offset"]},{name:"arrow",enabled:!0,phase:"main",fn:function(o){var a,u=o.state,f=o.name,c=o.options,s=u.elements.arrow,p=u.modifiersData.popperOffsets,d=l(u.placement),v=j(d),b=[r,e].indexOf(d)>=0?"height":"width";if(s&&p){var m=function(t,n){return A("number"!=typeof(t="function"==typeof t?t(Object.assign({},n.rects,{placement:n.placement})):t)?t:P(t,i))}(c.padding,u),y=h(s),w="y"===v?t:r,g="y"===v?n:e,O=u.rects.reference[b]+u.rects.reference[v]-p[v]-u.rects.popper[b],M=p[v]-u.rects.reference[v],E=x(s),k=E?"y"===v?E.clientHeight||0:E.clientWidth||0:0,B=k/2-y[b]/2+(O/2-M/2),S=q(m[w],B,k-y[b]-m[g]);u.modifiersData[f]=((a={})[v]=S,a.centerOffset=S-B,a)}},effect:function(t){var n=t.state,e=t.options.element,r=void 0===e?"[data-popper-arrow]":e;null!=r&&("string"!=typeof r||(r=n.elements.popper.querySelector(r)))&&b(n.elements.popper,r)&&(n.elements.arrow=r)},requires:["popperOffsets"],requiresIfExists:["preventOverflow"]},{name:"hide",enabled:!0,phase:"main",requiresIfExists:["preventOverflow"],fn:function(t){var n=t.state,e=t.name,r=n.rects.reference,i=n.rects.popper,o=n.modifiersData.preventOverflow,a=J(n,{elementContext:"reference"}),u=J(n,{altBoundary:!0}),f=N(a,r),c=N(u,i,o),s=Q(f),p=Q(c);n.modifiersData[e]={referenceClippingOffsets:f,popperEscapeOffsets:c,isReferenceHidden:s,hasPopperEscaped:p},n.attributes.popper=Object.assign({},n.attributes.popper,{"data-popper-reference-hidden":s,"data-popper-escaped":p})}}]});class et{constructor(t,n,e){this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.anchor=t,this.popover=n,this.options=Object.assign({skidding:0,distance:0,placement:"bottom-start",strategy:"absolute",transitionElement:this.popover,visibleClass:"popover-visible",onAfterShow:()=>{},onAfterHide:()=>{},onTransitionEnd:()=>{}},e),this.popover.hidden=!0,this.popover.classList.remove(this.options.visibleClass),this.popover.addEventListener("transitionend",this.handleTransitionEnd)}handleTransitionEnd(t){t.target===this.options.transitionElement&&(this.options.onTransitionEnd.call(this,t),!1!==this.isVisible||this.popover.hidden||(this.popover.hidden=!0,this.popover.classList.remove(this.options.visibleClass),this.options.onAfterHide.call(this)))}destroy(){this.popover.removeEventListener("transitionend",this.handleTransitionEnd),this.popper&&(this.popper.destroy(),this.popper=null)}show(){this.isVisible=!0,this.popover.hidden=!1,requestAnimationFrame((()=>this.popover.classList.add(this.options.visibleClass))),this.popper&&this.popper.destroy(),this.popper=nt(this.anchor,this.popover,{placement:this.options.placement,strategy:this.options.strategy,modifiers:[{name:"flip",options:{boundary:"viewport"}},{name:"offset",options:{padding:5,offset:[this.options.skidding,this.options.distance]}}]}),this.popover.addEventListener("transitionend",(()=>this.options.onAfterShow.call(this)),{once:!0}),requestAnimationFrame((()=>this.popper.update()))}hide(){this.isVisible=!1,this.popover.classList.remove(this.options.visibleClass)}setOptions(t){this.options=Object.assign(this.options,t),this.isVisible?this.popover.classList.add(this.options.visibleClass):this.popover.classList.remove(this.options.visibleClass),this.popper&&(this.popper.setOptions({placement:this.options.placement,strategy:this.options.strategy}),requestAnimationFrame((()=>this.popper.update())))}}export{et as P}
+//# sourceMappingURL=p-d112948c.js.map